Implementation of IOS--transparent H5 (WebView) effect

A few days ago there is a completely transparent WebView loading H5 page effect of the implementation, is equivalent to a translucent mask layer, which has an opaque picture, the general native mask layer of the box will be used in this way, if the original code implementation, it is much simpler, the overlay of the view can be done, But if the entire page including mask layer to use WebView load H5 to achieve, it will be a bit complicated, this effect still took a good effort, in the actual development process, found WebView never touched the wonderful side: _uiwebviewscrollview, Uiwebbrowserview.

Initially, to set the color and transparency of the webview (not the overall alpha), but found that no matter how the operation is not possible, the middle part of the area will not be able to change the color, so the following recursive way to output the WebView all inherited in the UIView sub-view;

    func getnamesubviews (theview:uiview) {        for in  theview.subviews {             if View.iskindofclass (UIView) {                = Nsstring.init (utf8string:object_getclassname (view))                print (  "WebView's child view: \ (name)")            }            getnamesubviews (view)        }    }

Output Result:

WebView Sub-view: Optional (_uiwebviewscrollview)

WebView Sub-view: Optional (Uiwebbrowserview)

As a result, two classes were found: _uiwebviewscrollview, Uiwebbrowserview; This is the two class that has never been seen, but it can be seen from a name, but I wonder why there is no uiscrollview, or this _uiwebviewscrollview actually has something to do with the webview.scrollview that we call directly, but the ScrollView attribute of WebView inherits from Uiscrollview,uiscrollview inherited from UIView, intermediate inheritance There is no _uiwebviewscrollview in the relationship; and that's where I'm wondering, and I've added these three lines of code to the For loop,

        // UIView        Let name2 = nsstring.init (utf8string:object_getclassname (scroll))        print ("  Uiscrollview fetch name: \ (name2)")

Output Result:

Uiscrollview Fetch Name: Optional (uiscrollview)

The output is Uiscrollview, which means that the _uiwebviewscrollview printed in the For loop is not in the WebView property ScrollView of type Uiscrollview, but a sub-view of WebView ；

Next, in order to understand his two layer relations, I have made a little improvement of the recursive method;

func getnamesubviews (theview:uiview,index:int) {print ("\ (index) Start")         forViewinchTheview.subviews {ifView.iskindofclass (UIView) {let name=Nsstring.init (Utf8string:object_getclassname (view)) print ("child view of WebView: \ (name)")} getnamesubviews (View,index:index+1)} print ("end of \ (index)")    }

Output Result:

1 start

WebView Sub-view: Optional (_uiwebviewscrollview)

2 start

WebView Sub-view: Optional (Uiwebbrowserview)

3 start

3 End

2 End

1 End

The result shows that Uiwebbrowserview is a sub-view above the _uiwebviewscrollview If the incoming parameter is Webview.scrollview instead of WebView, you will find that only uiwebbrowserview output, that is, actually Uiwebbrowserview is a sub-view on WebView's property scrollview, but in fact, I Or wondering why the ScrollView did not output it, this is left to further study after the answer it;

In fact, there is a way to clearly see the layer distribution, run the following code:

func changecolorsubviews (theview:uiview) { forViewinchTheview.subviews {ifView.iskindofclass (UIView) {let name=Nsstring.init (Utf8string:object_getclassname (view))ifName = ="_uiwebviewscrollview"{View.backgroundcolor=Uicolor.redcolor () print ("Red Child view of WebView: \ (name)")                }Else ifName = ="Uiwebbrowserview"{View.backgroundcolor=Uicolor.greencolor () print ("WebView's Green sub-view: \ (name)")                }Else{View.backgroundcolor=Uicolor.bluecolor () print ("Blue Child view of WebView: \ (name)")}} changecolorsubviews (view) }}

Run out of the interface after the debug View hierarchy inside can see the specific layer relationship;

After the relationship is clear, you'll know why you can't set WebView's Clearcolor, as long as you use recursion to set the background color of these two sub-views to Clearcolor, and set

Webview.opaque = False is OK; Of course, the main point is also the loading of the H5 page will be directly used to make the div transparent, no background body.

Concrete WebView deep-seated architecture system, and so on weekend research to summarize.

Implementation of IOS--transparent H5 (WebView) effect