Android如何利用JS来操作WebView里面的内容

原谅我无耻地改写了ios技术博客里面的内容，有能力的并且喜欢原汁原味的大牛可以看这里：http://jwdev.cn/2015/09/28/use-javascript-to-delete-web-element/

Web背景知识

web 时代三剑客 html + css + javascript

1 . html : 就像是我们创建一个View,只是规定我们创建的是一个长方形的框架,还有我们创建一个ImageView只是去创建一个可以放图片的控件,html只是规定了一些控件的类别,其中web 1.0时代以table控件为主要控件,web 2.0 时代,主要就是div控件了.这个div控件其实我们的View 是一样的东西.

2 . css : 我们在创建View之后是不是要给这个View设置width,height,background等等一些属性, 其实这些属性就是对应这web 中的css, css就是给用html控件添加样式用的,这里可以类比我们的XML文件.

3 . Javascript: 这是一个神奇的语言!因为他现在不仅可以做web端了,还可以用来做后台服务端了(node.js),而且还可以用来做移动端了(React Native).但是,在web端中,javascript一般用来处理html中的控件的动作啊,动画啊,改变属性啊.其实和Android中的手势和按钮事件还有view的动画,属性动画是差不多的.

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

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

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

图一(调整浏览器)

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



这时页面就变成手机版网页了.

图二(选择你要隐藏的控件)

点击手机图标左边那个搜索框 （现在是个带箭头的方框）-> 然后点击你要隐藏的控件



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

选择到你要选择到的控件 -> 然后左下角代码就被选中了.（网页可能变化，大家类比着来）



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

图四(用js代码区获取到要隐藏的控件)

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



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

由于本人不懂h5，但了解到div是控件，class大概是控件名字吧，如果名字有两个，中间有空，那在我看来就是两个控件了，大家到右边去找对应的名字下加入display：none,就立马看到名字对应的空间被隐藏了。

图四(用js代码区获取到要隐藏的控件)

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

document.getElementsByClassName('adpic')

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

图五(获取到要隐藏的元素,是元素1，不是元素2)



图六：通过下标访问（数据）数组的第一个元素

document.getElementsByClassName('adpic')[0]

图七(设置获取到控件的display属性)

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

上面一行代码就是去改变要隐藏的控件的display属性,将这个css属性改为none,就是不让这个控件显示,这时,我们要隐藏的数据就会自动消失了.

到处为止,我们的js代码就写好了,大概原理和思路我们都有了.在这个html页面中执行行代码就可以隐藏广告.但是我们的最终目的是在WebView中执行这行代码就行了.

接下来，WebView我就不多说了，那个上面的这段代码加在哪里合适呢？

其实就是在自定义的WebViewClient里面重写onPageFinished（）方法将前面的代码加在

view.loadUrl("javascript:function setTop(){**加在这里**}setTop();");

下面是实例代码，各位看官可以see see

webView.setWebViewClient(new webViewClient());
//Web视图
private class webViewClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {

view.loadUrl("javascript:function setTop(){document.getElementsByClassName('adpic')[0].style.display = 'none';}setTop();");
}
}

偶要干正事了，就这里吧，还望那些懂Android或H5大牛经过指点一二…