透明H5(webView)效果的實現(xiàn)
一個完全透明的webView加載H5頁面的效果的實現(xiàn)禁熏,就相當于是一個半透明的遮罩層叨咖,上面有一個不透明的圖片,一般原生的帶遮罩層的彈框會采用這種方式荣恐,如果是原生代碼實現(xiàn)沟蔑,就簡單的多了,視圖的疊加就可以搞定矫膨,但如果整個頁面包括遮罩層都要用webView加載H5來實現(xiàn)的話差凹,就會有點兒復雜,這一效果還是花費了好一番功夫侧馅,在實際的開發(fā)過程中危尿,發(fā)現(xiàn)了webView從未接觸過的奇妙的一面:_UIWebViewScrollView、UIWebBrowserView施禾。
起初脚线,是要設置webView的顏色和透明度(不是整體的alpha),但是發(fā)現(xiàn)無論怎么操作都不可以弥搞,中間的那部分區(qū)域也無法改變顏色邮绿;于是使用下面遞歸的方式輸出了WebView中所有繼承于UIView的子視圖;
輸出結果:
WebView 的子視圖 : Optional(_UIWebViewScrollView)
WebView 的子視圖 : Optional(UIWebBrowserView)
結果就發(fā)現(xiàn)了兩個類:_UIWebViewScrollView渠旁、UIWebBrowserView;這是兩個從來沒見過的類船逮,但是從名字也大致能看出來在什么位置顾腊;但是我很奇怪的是為什么沒有UIScrollView,或者還是這個_UIWebViewScrollView事實上和我們直接調(diào)用的webView.scrollView有著什么聯(lián)系挖胃,但是webView的scrollView屬性繼承于UIScrollView杂靶,UIScrollView繼承于UIView,中間的繼承關系中也并未出現(xiàn)_UIWebViewScrollView酱鸭;這也是我疑惑的地方吗垮;
_UIWebViewScrollView并不是webView中類型為UIScrollView的屬性scrollView中的,而是構成webView的一個子視圖凹髓;
UIWebBrowserView是在_UIWebViewScrollView上面的一個子視圖烁登;如果傳入?yún)?shù)是webView.scrollView而不是webView,就會發(fā)現(xiàn)只有UIWebBrowserView輸出了蔚舀,也就是說事實上UIWebBrowserView是webView的屬性scrollView上的一個子視圖
這個關系理清楚之后就知道為什么設置不了webView的clearColor了饵沧,只要使用遞歸設置這兩個子視圖的背景色為clearColor,同時赌躺,設置
webView.opaque = false就OK了狼牺;當然,主要的一點還有加載的H5頁面也要直接使用div做成透明的礼患,沒有背景body.
解決方案:
_webView.opaque = NO;
_webView.backgroundColor= [UIColor whiteColor];