iOS 中webview加载网页的过程中出现黑边,但加载完成后就正常

iOS 中webview加载网页的过程中出现黑边,但加载完成后就正常_第1张图片
黑边情况
iOS 中webview加载网页的过程中出现黑边,但加载完成后就正常_第2张图片
图层结构显示UIWebBrowserView问题

透明H5(webView)效果的实现
一个完全透明的webView加载H5页面的效果的实现,就相当于是一个半透明的遮罩层,上面有一个不透明的图片,一般原生的带遮罩层的弹框会采用这种方式,如果是原生代码实现,就简单的多了,视图的叠加就可以搞定,但如果整个页面包括遮罩层都要用webView加载H5来实现的话,就会有点儿复杂,这一效果还是花费了好一番功夫,在实际的开发过程中,发现了webView从未接触过的奇妙的一面:_UIWebViewScrollView、UIWebBrowserView。
起初,是要设置webView的颜色和透明度(不是整体的alpha),但是发现无论怎么操作都不可以,中间的那部分区域也无法改变颜色;于是使用下面递归的方式输出了WebView中所有继承于UIView的子视图;

输出结果:

WebView 的子视图 : Optional(_UIWebViewScrollView)

WebView 的子视图 : Optional(UIWebBrowserView)

结果就发现了两个类:_UIWebViewScrollView、UIWebBrowserView;这是两个从来没见过的类,但是从名字也大致能看出来在什么位置;但是我很奇怪的是为什么没有UIScrollView,或者还是这个_UIWebViewScrollView事实上和我们直接调用的webView.scrollView有着什么联系,但是webView的scrollView属性继承于UIScrollView,UIScrollView继承于UIView,中间的继承关系中也并未出现_UIWebViewScrollView;这也是我疑惑的地方;

_UIWebViewScrollView并不是webView中类型为UIScrollView的属性scrollView中的,而是构成webView的一个子视图;

UIWebBrowserView是在_UIWebViewScrollView上面的一个子视图;如果传入参数是webView.scrollView而不是webView,就会发现只有UIWebBrowserView输出了,也就是说事实上UIWebBrowserView是webView的属性scrollView上的一个子视图
这个关系理清楚之后就知道为什么设置不了webView的clearColor了,只要使用递归设置这两个子视图的背景色为clearColor,同时,设置

webView.opaque = false就OK了;当然,主要的一点还有加载的H5页面也要直接使用div做成透明的,没有背景body.


解决方案:

  _webView.opaque = NO;
  _webView.backgroundColor = [UIColor whiteColor];

你可能感兴趣的:(iOS 中webview加载网页的过程中出现黑边,但加载完成后就正常)