iOS开发利用Javascript去操作UIWebView的内容

Web背景知识

web 时代三剑客 html + css + javascript
html : 就像是我们创建一个UIView,只是规定我们创建的是一个长方形的框架,还有我们创建一个UIImageView只是去创建一个可以放图片的控件,html只是规定了一些控件的类别,其中web 1.0时代以table控件为主要控件,web 2.0 时代,主要就是div控件了.这个div控件其实我们的UIView 是一样的东西.
css : 我们在创建UIView之后是不是要给这个UIView设置frame,backgroundcolor等等一些属性, 其实这些属性就是对应这web 中的css, css就是给用html控件添加样式用的.
Javascript: 这是一个神奇的语言!因为他现在不仅可以做web端了,还可以用来做后台服务端了(node.js),而且还可以用来做移动端了(React Native).但是,在web端中,javascript一般用来处理html中的控件的动作啊,动画啊,改变属性啊.其实和iOS中的手势和按钮事件还有view动画,和layer动画是差不多的.

实例: 利用javascript 去屏蔽网页中广告

一般情况下我们使用一些网页中,都会带一些广告.我们要把这些广告去掉.

在chrome 中打开http://m.haodou.com/topic-327282.html?id=327282,并且设为手机模式.调整方法见图

图一(调整浏览器)

浏览器设置 -> 更多工具 -> 开发者工具 -> 手机模式(左下角 手机按钮)



这时页面就变成手机版网页了.
图二(选择你要隐藏的控件)

点击手机图标左边那个

搜索框

 -> 然后点击你要隐藏的控件



图三(获取到你要隐藏的代码)

选择到你要选择到的控件 -> 然后左下角代码就被选中了.



其中右下角中是这个控件对应的css代码,在其中添加一行display:none,这时这个选中的控件就被隐藏起来了.但是我们主要通过javascript去操作这个控件
图四(用js代码区获取到要隐藏的控件)

点击console -> 在命令行中输入要执行的代码 -> 返回执行结果

1	document.getElementsByClassName('adpic')

上面一行代码是获取到html 中class 是’adpic’的控件. 但是可以看见返回值是被[]包围的,这其实是一个数据.
图五(获取到要隐藏的元素)




图六(获取到要隐藏的元素)

1	document.getElementsByClassName('adpic')[0]

通过下标访问法去访问数组的第0个元素.
图七(设置获取到控件的display属性)

1	document.getElementsByClassName('adpic')[0].style.display = 'none'

上面一行代码就是去改变要隐藏的控件的display属性,将这个css属性改为none,就是不让这个控件显示,这时,我们要隐藏的数据就会自动消失了.
到处为止,我们的js代码就写好了.在这个html页面中执行行代码就可以隐藏广告.但是我们的最终目的是在UIWebView中执行这行代码就行了.

UIWebView的使用

创建UIWebView
设置代理
加载网络请求

12 3 4 5 6 7

//创建webview self.webview = [[UIWebView alloc] initWithFrame:self.view.frame]; [self.view addSubview:_webview]; //设置代理 self.webview.delegate = self; //发送请求 [_webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.haodou.com/topic-327282.html?id=327282"]]];

运行后情况如下图




我们现在加载的网易的图片是有图片的,现在我们只需要往这个webview 中运行我们上面测试出来的一条js代码就会屏蔽这个广告图.

但是怎么运行呢?
还记得我们给webview添加了代理了么?他有一个回调方法.

见代码!!!

12 3 4

#pragma mark - UIWebViewDelegate - (void)webViewDidFinishLoad:(UIWebView *)webView{ [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.getElementsByClassName('adpic')[0].style.display = 'none'"]; }

这行代码是在webview 中执行参数中的那一行代码,还记得这行代码有什么作用么?
这个回调函数会在webview 请求网页成功会执行这个方法,当执行这个方法时,我们就用webview去执行屏蔽广告的js代码.
效果如下图



当广告消失后,是不是我们的目的达到了.但是这个js代码要自己去分析.因为每一个网页中广告的控件都不一样.但是学会了去网页中通过js找到一个控件元素,那就离成功不远了.