iOS开发利用Javascript去操作UIWebView的内容_js控制webview栗色元素-CSDN博客

本文链接：https://blog.csdn.net/baidu_31364929/article/details/50487029

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
设置代理

加载网络请求

//创建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添加了代理了么?他有一个回调方法.
见代码!!!

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