前几天有一个完全透明的webView加载H5页面的效果的实现,就相当于是一个半透明的遮罩层,上面有一个不透明的图片,一般原生的带遮罩层的弹框会采用这种方式,如果是原生代码实现,就简单的多了,视图的叠加就可以搞定,但如果整个页面包括遮罩层都要用webView加载H5来实现的话,就会有点儿复杂,这一效果还是花费了好一番功夫,在实际的开发过程中,发现了webView从未接触过的奇妙的一面:_UIWebViewScrollView、UIWebBrowserView。

起初,是要设置webView的颜色和透明度(不是整体的alpha),但是发现无论怎么操作都不可以,中间的那部分区域也无法改变颜色;于是使用下面递归的方式输出了WebView中所有继承于UIView的子视图;

    func getNameSubViews(theView:UIView) {

        for view in theView.subviews {

            if view.isKindOfClass(UIView){

                let name = NSString.init(UTF8String: object_getClassName(view))

                print("WebView 的 子视图 : \(name)")

            }

            getNameSubViews(view)

        }

    }

输出结果:

WebView 的子视图 : Optional(_UIWebViewScrollView)

WebView 的子视图 : Optional(UIWebBrowserView)

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

        let scroll:UIScrollView = UIScrollView() //UIView
let name2 = NSString.init(UTF8String: object_getClassName(scroll))
print("UIScrollView取到的名称 : \(name2)")

输出结果:

UIScrollView取到的名称 : Optional(UIScrollView) 

输出的是UIScrollView,这说明for循环中打印出来的_UIWebViewScrollView并不是webView中类型为UIScrollView的属性scrollView中的,而是构成webView的一个子视图;

接下来,为了搞明白他这两个的图层关系,我把递归方法做了一点儿改进;

    func getNameSubViews(theView:UIView,index:Int) {
print("\(index) 开始")
for view in theView.subviews {
if view.isKindOfClass(UIView){
let name = NSString.init(UTF8String: object_getClassName(view))
print("WebView 的 子视图 : \(name)")
}
getNameSubViews(view,index: index+)
}
print("\(index) 结束")
}

输出结果:

1 开始

WebView 的子视图 : Optional(_UIWebViewScrollView)

2 开始

WebView 的子视图 : Optional(UIWebBrowserView)

3 开始

3 结束

2 结束

1 结束

这个结果说明了UIWebBrowserView是在_UIWebViewScrollView上面的一个子视图;如果传入参数是webView.scrollView而不是webView,就会发现只有UIWebBrowserView输出了,也就是说事实上UIWebBrowserView是webView的属性scrollView上的一个子视图,但事实上,我还是在疑惑为什么scrollView没有输出呢,这个留待之后深入研究了再进行解答吧;

其实还有一个办法也可以清楚的看到图层分布,运行如下代码:

    func changeColorSubViews(theView:UIView) {

        for view in theView.subviews {
if view.isKindOfClass(UIView){
let name = NSString.init(UTF8String: object_getClassName(view))
if name == "_UIWebViewScrollView"{
view.backgroundColor = UIColor.redColor()
print("WebView 的 红色子视图 : \(name)") }else if name == "UIWebBrowserView"{
view.backgroundColor = UIColor.greenColor()
print("WebView 的 绿色子视图 : \(name)")
}else{
view.backgroundColor = UIColor.blueColor()
print("WebView 的 蓝色子视图 : \(name)") }
}
changeColorSubViews(view)
}
}

运行出界面之后去Debug View Hierarchy里面就可以看到具体的图层关系了;

这个关系理清楚之后就知道为什么设置不了webView的clearColor了,只要使用递归设置这两个子视图的背景色为clearColor,同时,设置

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

具体的webView深层次的架构体系,等周末研究研究再来总结。

iOS -- 透明H5(webView)效果的实现的更多相关文章

  1. iOS开发之WebView

    做iOS的应用也有一段时间了,在之前的demo中一直没有机会用到WebView,今天就查缺补漏一下,使用一下WebView.最早接触WebView是在Android中接触的,iOS中的WebView的 ...

  2. iOS与H5交互

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...

  3. 浅谈 iOS 与 H5 的交互- JavaScriptCore 框架

    前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...

  4. iOS与H5交互遇到的坑

    之前的博客写过使用<JavaScriptCore/JavaScriptCore.h>库来实现与H5的交互,但是在项目中还是遇到了一些不得不踩的坑.在这里将我遇到的问题以及参考网上几位大神的 ...

  5. WebViewJavascriptBridge详细使用 iOS与H5交互的方案

    WebViewJavascriptBridge详细使用 源网址: https://www.cnblogs.com/jiang-xiao-yan/p/5345755.html    前言 WebView ...

  6. iOS仿支付宝首页效果

    代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...

  7. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  8. IOS的H5页面滑动不流畅的问题:

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  9. 《IT蓝豹》高仿花田ios版标签移动效果

    高仿花田ios版标签移动效果,长按每一个item拖动到自己想要位置后,后面位置移动补全效果 . 本项目适合研究gridview拖拽效果的朋友下载. 学习android动画特效. 本项目主要靠DragG ...

随机推荐

  1. linux crontab

    概念: Linux 工作排程的种类:at, cron at 是个可以处理仅执行一次就结束排程的指令,不过要执行 at 时, 必须要有 atd 这个服务支持. crontab 这个指令所设定的工作将会循 ...

  2. Windows 程序设计

    一.Win32 API /******************************************************************** created: 2014/04/1 ...

  3. python实验二:字符串排序

    ##统计word中的各个字符的出现的次数,并统计出所有前十名的字符使用次数 # -*- coding:utf-8 -*- word='''awfesdafhjkcasadckjsdackjsadvcn ...

  4. linux driver编译环境搭建和命令

    首先将ubuntu14.04的内核升级到内核3.18.12. 其次,Ubuntu14.04上驱动编译命令 $ sudo make -C ~/linux-3.18.12/ M=`pwd` modules ...

  5. bootstrap-标题

    1.重置了margin-top和margin-bottom的值,h1到h3重置后margin-top的值都是20px:h4到h6重置后的值都是10px: 2.所有标题的行高都是1.1(也就是font- ...

  6. Java线程池入门

    序 为什么要用线程池?什么情况下才会用到线程池? 并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁创建线程和销毁线程需要时间. 因此 ...

  7. Django模板系统——过滤器

    转自:https://www.douban.com/note/145065606/  <省得每次都得去翻麻烦> 过滤器,变量的显示形式的改变一.形式:小写{{ name | lower } ...

  8. get_object_vars($var) vs array($var)

    get_object_vars(\(var) vs array(\)var) test case class Test { public function actionGetObjectVarsVsA ...

  9. OpenVPN 通过服务器上网

    在Windows环境中架设OpenVPN服务相对比较简单,网上这方面的教程也比较丰富,照葫芦画瓢即可.但是大部分教程都只讲了如何将client与Server通过VPN管道连接起来,使client可以正 ...

  10. HTML5之语义标签

    在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块 ...