(原创)

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, 这个代理是在第一步签的, 代理方法如下;

#pragma mark - WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController

didReceiveScriptMessage:(WKScriptMessage *)message {

if ([message.name isEqualToString:@"TheData"]) {

NSLog(@"JS给你传的值~~~%@", message.body);

//这里会打印123456

}

}

以上大体上就实现了OC与JS的交互

为了获取HTML上的触摸事件, 我们注入以下JS, 这些JS能对HTML的触摸事件进行响应(比如开始触摸, 滑动, 手指离开等), 并且获取触摸事件的坐标, 利用JS给OC传值的方法进行回传:

- (void)zhurujs{

static dispatch_once_t onceToken;

dispatch_once(&onceToken, ^{

[[self.WKwebView configuration].userContentController addScriptMessageHandler:self name:@"TheData"];

});

NSString *js = @"document.ontouchstart=function(event){\

x=event.targetTouches[0].clientX;\

y=event.targetTouches[0].clientY;\

window.webkit.messageHandlers.TheData.postMessage('thewebview:touch:start:\'+x+\':\'+y);\

};\

document.ontouchmove=function(event){\

x=event.targetTouches[0].clientX;\

y=event.targetTouches[0].clientY;\

window.webkit.messageHandlers.TheData.postMessage('thewebview:touch:move:\'+x+\':\'+y);\

};\

document.ontouchcancel=function(event){\

window.webkit.messageHandlers.TheData.postMessage('thewebview:touch:cancel');\

;};\

document.ontouchend=function(event){\

window.webkit.messageHandlers.TheData.postMessage('thewebview:touch:end');\

};";

[_WKwebView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {

NSLog(@"response: %@ error: %@", response, error);

NSLog(@"call js alert by native");

}];

}

第二步: 捕获触摸事件返回的html坐标

在JS传值的代理里面这样写:

- (void)userContentController:(WKUserContentController *)userContentController

didReceiveScriptMessage:(WKScriptMessage *)message {

if ([message.name isEqualToString:@"TheData"]) {

[self jszhixing:message.body];

}

}

- (void)jszhixing:(NSString *)str{

//    NSLog(@"requestString == %@", str);

_components = nil;

_components = [str componentsSeparatedByString:@":"];

if ([_components count] > 1 && [(NSString *)[_components objectAtIndex:0]

isEqualToString:@"thewebview"]) {

if([(NSString *)[_components objectAtIndex:1] isEqualToString:@"touch"])

{

if ([(NSString *)[_components objectAtIndex:2] isEqualToString:@"start"])

{

float ptX = [[_components objectAtIndex:3]floatValue];

float ptY = [[_components objectAtIndex:4]floatValue];

NSLog(@"touch point (%f, %f)", ptX, ptY);

NSLog(@"开始触摸");

}else if ([(NSString *)[_components objectAtIndex:2] isEqualToString:@"move"]){

float ptX = [[_components objectAtIndex:3]floatValue];

float ptY = [[_components objectAtIndex:4]floatValue];

NSLog(@"touch point (%f, %f)", ptX, ptY);

NSLog(@"手指移动");

}else if ([(NSString*)[_components objectAtIndex:2]isEqualToString:@"cancel"]) {

NSLog(@"取消");

}else if ([(NSString*)[_components objectAtIndex:2]isEqualToString:@"end"]) {

NSLog(@"手指离开");

}

}

}

}

上边这个方法获取到手指刚触摸和移动时的HTML坐标

第三步: 根据坐标获取html元素

document.elementFromPoint(%f, %f)

这句js就是获取这个元素的代码, 但是直接注入这个代码返回值是空, 必须注入如:

获取该元素class标签对应的值

document.elementFromPoint(%f, %f).className

获取该元素标签值

document.elementFromPoint(%f, %f).tagName

第四步: 屏蔽元素

根据坐标, 获取元素, 屏蔽元素, 都在一句代码里

document.elementFromPoint(%f, %f).style.display = 'none'

实现

[_WKwebView evaluateJavaScript:[NSString stringWithFormat:@"document.elementFromPoint(%f, %f).style.display = 'none'", x, y] completionHandler:^(id _Nullable response, NSError * _Nullable error) {

}];

以上4个步骤就基本实现了,  屏蔽任何HTML元素的功能

效果图:

---

保存图片

获取元素的道理与上面的一样, 都是通过点击(或者长按)获取元素, 获取到元素时候取出他的tagName, 如果tagName是IMG, 那就再取他的src, 这就是网络图片的地址了, 用此方法可以取出网页上任意图片的地址, 根据图片地址保存图片到相册就不多说了

[_WKwebView evaluateJavaScript:[NSString stringWithFormat:@"document.elementFromPoint(%f, %f).tagName", ptX, ptY] completionHandler:^(id _Nullable response, NSError * _Nullable error) {

NSString * tagName = response;

NSLog(@"tagName %@", tagName);

if ([tagName isEqualToString:@"IMG"]) {

[_WKwebView evaluateJavaScript:[NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", ptX, ptY] completionHandler:^(id _Nullable response, NSError * _Nullable error) {

//图片地址

NSString * imgURL = response;

}];

}

}];

---

截取链接

获取元素的道理同上, 链接一般都在A标签里面, 那么如果我们要获取某一个点击的链接, 就要获取对应元素的A标签

获取A标签分为两种情况:

第一种, 获取的元素tagName是DIV, 如果你确定他有链接的活, 可以直接通过以下获取A里面的链接

[_WKwebView evaluateJavaScript:[NSString stringWithFormat:@"document.elementFromPoint(%f, %f).getElementsByTagName(\"a\")[0].href", ptX, ptY] completionHandler:^(id _Nullable response, NSError * _Nullable error) {

NSString * href = response;

}];

第二种, 获取的元素tagName不是DIV, 有可能是SPAN, H3之类的基础标签, 这种标签一般都是嵌入进A标签的, 你看他的父标签(parentNode)的tagName是不是A, 不是再看他的父标签的父标签是不是A, 我最多做了三级判断, 一般一级就可以直接取出来A,

下面放的的是一级标签的判断及取链接的代码

[_WKwebView evaluateJavaScript:[NSString stringWithFormat:@"document.elementFromPoint(%f, %f).parentNode.tagName", ptX, ptY] completionHandler:^(id _Nullable response, NSError * _Nullable error) {

if ([response isEqualToString:@"A"]) {

[_WKwebView evaluateJavaScript:[NSString stringWithFormat:@"document.elementFromPoint(%f, %f).parentNode.href", ptX, ptY] completionHandler:^(id _Nullable response, NSError * _Nullable error) {

NSString * href = response;

}];

}

}];

总结:

善于利用JS注入解决一些OC难以解决的问题, 这是整篇文章的中心

Demo 地址:  https://github.com/yizhimaomaoqiu/-#-

看得开心的小伙伴帮帮忙去git上点个赞, 万分感谢