iOS 利用Javascript去操作UIWebView的内容
2016-08-26 16:49
148 查看
Web背景知识
web 时代三剑客 html + css + javascripthtml : 就像是我们创建一个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') |
图五(获取到要隐藏的元素)
图六(获取到要隐藏的元素)
1 | document.getElementsByClassName('adpic')[0] |
图七(设置获取到控件的display属性)
1 | document.getElementsByClassName('adpic')[0].style.display = 'none' |
到处为止,我们的js代码就写好了.在这个html页面中执行行代码就可以隐藏广告.但是我们的最终目的是在UIWebView中执行这行代码就行了.
UIWebView的使用
创建UIWebView设置代理
加载网络请求
12 | //创建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 | #pragma mark - UIWebViewDelegate - (void)webViewDidFinishLoad:(UIWebView *)webView{ [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.getElementsByClassName('adpic')[0].style.display = 'none'"]; } |
这个回调函数会在webview 请求网页成功会执行这个方法,当执行这个方法时,我们就用webview去执行屏蔽广告的js代码.
效果如下图
当广告消失后,是不是我们的目的达到了.但是这个js代码要自己去分析.因为每一个网页中广告的控件都不一样.但是学会了去网页中通过js找到一个控件元素,那就离成功不远了.
相关文章推荐
- iOS开发利用Javascript去操作UIWebView的内容
- 利用Javascript去操作UIWebView的内容
- 利用Javascript去操作UIWebView的广告内容
- iOS 利用UIWebView与JavaScript交互的最简单办法
- iOS 利用UIWebView与JavaScript交互的最简单办法(本人已验证可行)
- IOS 利用UIWebView和javascript的技术实现打开网页快速定位到某处(id)
- iPhone 和 iPad的ios 开发中 利用 WebViewJavascriptBridge组件,通过 UIWebView 对Html进行双向通讯
- iOS 利用UIWebView与JavaScript交互的最简单办法
- iPhone 和 iPad的ios 开发中 利用 WebViewJavascriptBridge组件,通过 UIWebView 对Html进行双向通讯
- javaScript中利用ActiveXObject来创建FileSystemObject操作文件 (转贴)
- 鼠标悬浮到表格的单元格上,将弹出一个框,框中显示这个单元格的内容。框失去焦点,框也消失。利用jQuery+javascript写的。
- ios UIWebView调用本地html和javascript,并且和ios通讯
- iOS-利用本地数据来代替远程UIWebView请求
- JSON(JavaScript Object Notation)内容详解(Android操作JSON)
- javaScript中利用ActiveXObject来创建FileSystemObject操作文件(转http://www.cnblogs.com/charles001/articles/555363.html)
- [iOS] 使用UIWebView时objective-c与javascript互相调用 1
- iOS系统的Javascript与Objective-C互操作指南
- UIWebView中运行javascript的方法得到网页的html内容
- javascript可以轻松操作客户端剪贴板内容
- 利用javascript实现页面内容筛选