By

文章目录
  1. 1. 文档更新说明
  2. 2. 前言
  3. 3. 现象
  4. 4. 解决方案

文档更新说明

  • 最后更新 2016年10月20日
  • 首次更新 2016年10月20日

前言

　　最近在项目中使用WKWebview视图接入web页面之后,发现一个比较奇怪的问题,在长按web页面上Body元素之外的区域时,出现了一个整体暗黑色高亮的效果.这个确实影响美感,感觉有必解决这个问题,要出一下解决方案. 　　

现象

　　上图中,黑色为点击body之外区域后出现的问题.下面主要说一下解决方案.

解决方案

　　解决这个问题之前,我首先使用了iOS上微信,QQ浏览器,Safari浏览器进行测试,发现Safari浏览器出现同样的问题,而另外的浏览器则没出现.基本上可以确定了这个页面兼容性问题了.那为什么Sarari浏览器会出现这种问题,而其他浏览器没有呢?其实我们只需要在加载到的web页面里面做一些处理,也同样可以实现其他浏览器的效果.
　　原理如下,首先通过网络请求将URL的数据存在内存里,接近对HTML结构进修修改,添加JS代码等对加载到的数据进行修改,接着再借助WKWebView的本地HTML渲染功能,将修改之后的HTML页面重新显示给用户看,这样即可解决我们的问题啦😄.
　　当然原理讲起来简单,实现起来可能要花费不少时间.这里我给出一个便捷的解决方案,可以联系Web负责人,将下方代码植入每一个出问题的Web页面上,即可解决此类问题了.

1
2
3
4
5
6
7
8
9
10
11
12
$('body').append("<div id='cocos'></div>");
$('#cocos').css({
    'position': 'fixed',
    'top':'0px',
    'left':'0px',
    'background-color': '#ffffff',
    'height': function () { return $(document).height(); },
    'opacity': '0',
    'overflow': 'hidden',
    'width': function () { return $(document).width(); },
    'z-index': '-543314602'
});

　　这部分JS代码相当简单我就不解释了,聪明的你一定可以理解我的意思了吧~

文章目录
  1. 1. 文档更新说明
  2. 2. 前言
  3. 3. 现象
  4. 4. 解决方案