ios wkweb设置图片_iOS 详解WKWebview屏蔽广告,保存图片以及截取链接

(原创)

2017-6-20

最近刚刚实现的功能, 分享一下经验

(原谅文章没有句号, 为了开发方便我设置的中文下使用英文标点).

自己做了一个比较简单浏览器, 里面有模仿UC实现长按页面屏蔽广告的功能

保存网页图片和获取网页跳页的链接都是基于上面做的扩展, 这里详细讲去除广告

思路:

手动去除广告主要有以下几个步骤:

1, 获取html上的触摸事件

2, 捕获触摸事件返回的html坐标(注意, 是html上的坐标, 不是webview上的坐标)

3, 判断手势的同时根据坐标获取html元素

4, 屏蔽元素

Demo链接在最下面

理论上, 可以屏蔽任何html元素, 包括某篇文章的标题, 甚至包括百度一下的按钮, 当然也包括广告, 因为你不知道每个网页的广告都是怎么构成的, 不如让用户自己来选择屏蔽, 然后做缓存, 把这些页面的用来屏蔽的js代码缓存, 每到这个页面就注入这些js, 这就实现了长期屏蔽广告(html元素)的功能

(由于本人并非专业JS开发,  有点兴趣才去接触, 以下有错误的地方希望看官谅解指正, 感激不尽!)

第一步: 获取HTML上的触摸事件

想要获取HTML的触摸事件, 必须了解一点OC与JS交互的知识

OC与JS做交互分为两块, 1, OC向HTML注入JS      2, JS传值给OC

1, OC向HTML注入JS

OC为什么要和JS做交互? 因为OC没有办法直接对HTML页面进行操作(或许有,我不知道), 只能注入JS, 让JS去操作HTML, WKWebView里OC注入JS的方法如下:- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

2, JS传值给OC

流程大概是这样的:

乙想告诉甲一个秘密, 甲给乙一张白纸,  乙在白纸上写完了又还给甲, 甲拿到了纸就知道了乙想说什么

于是, 那张纸是关键, 上边的过程在程序里是这么实现的:

OC给了JS一个对象, JS给这个对象添加了一个属性还给了OC, OC根据这个对象拿到了JS想要传的值

分步实现:

(1)OC给了JS一个对象, 对象就叫TheData吧, 在注入对象的时候会顺便签一个代理, (注意: 相同的字符串只能在每个wkwebview对象里注入一次, 第二次就会崩溃)[[self.WKwebView configuration].userContentController addScriptMessageHandler:self name:@"TheData"];

(2)JS给这个对象添加了一个属性还给了OC, 这是一段JS代码, 可是原本HTML里面没有这代码啊, 怎么办?往上看, 刚讲完OC注入JS代码window.webkit.messageHandlers.TheData.postMessage('123456')

(3)OC根据这个对象拿到了JS想要传的值, 当JS里执行了上边第二步的代码之后, OC里就会调用一个代理, WKScriptMessageHandler, 这个代理是在第一步签的, 代