研究 wkwebview 的子 view 和 <body> 的关系

这个问题来自需求:当 webview 下拉 bounce 的时候,在漏出的部分显示自定义的 view。类似在微信打开一个公众号后显示的“此页面由 **** 提供”,这样的交互。

中间经过若干测试,实现此功能有三个关键点;

  1. 设置 webview.scrollView.backgroundColor = [UIColor clearColor]; 目的为了下拉整个页面时,能够漏出我们自定义 view。(这里需要指出的是,下拉页面出现 bounce 效果时,漏出的 是 wkscrollview;为什么这样,我猜测是因为 Safari 渲染的时候, bounce 效果是出在 wkscrollview上,可参看这个测试页面,请在 Safari 里打开)
  2. 结合 1,将这个自定义 view,放在 wkwebview 和 wkscrollview 之间(猜测,webview.scrollView 是 wkscrollview 的代理对象,而 wkscrollview 是 <body> 的代理元素,是否真的这样需要看看源码)。
  3. 添加自定义 view 到 wkwebview 里的时机是
    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
    而不是
    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
    因为不同页面书写方式,导致有些样式会生效时机不同,页面加载完毕并不是个很好的时机。

在生成 webview 的时候,设置 webview.scrollView.backgroundColor = [UIColor clearColor];特别的需要说明下,当 h5 在 body 上写内联样式 <body style="background-color:red">;或者写 style 样式;或者外联 <link rel="stylesheet" href> 三种写法,去设置 body 的颜色,是否生效看不同的情况;

  1. 当设置的 body 颜色是 #ffffff 白色时,不论什么时候去设置 body 颜色都不会覆盖 webview.scrollView.backgroundColor 的颜色。
  2. 当设置的颜色是非白色时,会覆盖 webview.scrollView.backgroundColor

通过对照 html 的 dom 层级和 wkwebview 的层级,


wkwebview 的层级

有以下发现;

  1. html 里下拉时, bounce 效果后面的背景元素是 WKScrollView,所以设置 body 颜色会设置到 WKScrollView 的背景色。
  2. html 里其他元素全部由 WKContentView 嵌套。当整个页面是长页面需要分页时,会分多个 WKCompositingView 逐个显示;

使用上述方案实现下拉时显示自定义元素有个问题;

  1. 在开始滑动 scrollView 时候,设置 webview.scrollView.backgroundColor 的颜色,会将 h5 自己设置的背景色覆盖,所以 h5 要尽量不要依赖 body 的背景色做滑动背景;
  2. 某些页面,如测试页面2, 头部有个 fixed 元素,下拉时也会漏出 bounce 背景色。此时如果背景色设置透明后出现一个很奇怪的 漏出,这时候不应该漏出。如果解决这个问题呢,如果真的要解决这个问题,可能需要去读 html 的样式,这样就比较麻烦了。
  3. 对问题 2 ,有个讨巧的方案就是将漏出的自定义元素放在 fixed 元素的后面,如微信那样。具体样式可以将 测试页面2 放到微信里看效果。

如果真正要解决问题 2 ,目前还需要再找找方案,希望看到 webkit2 的源码后能有方案。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容