前言:Webview不仅可以加载网页,而且还支持加载的时候网页的任何元素都是可以修改的:隐藏、替换、插入新的html元素等等。总之,Webview的神奇给了我们很多发挥创意的可能:比如修改某些网页的标题,去掉头部广告或者引导下载banner。
我们可以使用JS注入Webiew的方式来去掉这些烦人的引导下载banner,几乎是模板代码,不管你是否精通js,你都能轻松地以瓢画葫来实现你想要的效果。
举个栗子:如网易考拉商品详情页
1、要去掉这个banner ,需要查找对应的class或者id
直接用google浏览器F12点到那待消除位置鼠标右键,选择审查元素就可以定位到
重要提醒:有些网站电脑端和手机端网页代码不一样,需要在点击Google浏览器右上角的Toggle Device按钮,并刷新一下网页,这样就切换成手机浏览模式方能找到想要去除元素的class、id或Tag。
2、根据这个class 我们就可以通过js注入的方式去掉这个banner
private void hidenBanner(WebView view)
{
//隐藏元素
String javascript = "javascript:function hideBanner() {" +
"var banners = document.getElementsByClassName('m-downloadbanner');" +
"var firstbanner = banners[0];" +
"firstbanner.remove();" + "}";
view.loadUrl(javascript);//创建方法
view.loadUrl("javascript:hideBanner();");//加载方法
}
代码解释:
①当浏览器载入 HTML 文档, 它就会成为 Document 对象,document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。所有主要浏览器都支持 Document 对象。
②获取所有指定类名的元素:var x = document.getElementsByClassName("example");
getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表,NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示:我们可以使用NodeList 对象的length属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
③javascript的两个方法是我们自己写的函数
mWebView.loadUrl("javascript:modifyText();");
mWebView.loadUrl("javascript:hideOther();");
第一个修改文本,可以注入任意html代码
第二个可以隐藏部分div元素
3、最后,直接放在onLoadResource()和onProgressChanged()中调用就好了。
webView.setWebViewClient(new WebViewClient()
{
@Override
public void onLoadResource(WebView webView, String s)
{
super.onLoadResource(webView, s);
hidenBanner(webView);
}
});
webView.setWebChromeClient(new WebChromeClient()
{
@Override
public void onProgressChanged(WebView view, int newProgress)
{
if (newProgress == 100)
{
progressBar.setVisibility(View.GONE);//加载完网页进度条消失
}
else
{
//更新进度
progressBar.setVisibility(View.VISIBLE);
progressBar.setProgress(newProgress);
hidenBanner(webView);
}
}
});
注意:该方法不要在onPageFinished() 中调用。这样会导致banner先显示出来,然后才被隐藏。体验不好。
调用后,就没有了:
二、注入js隐藏部分div元素和修改网页标题,多个操作用多个js去做才能生效
举个栗子:如下网页,我放到了自己的app里,但是又不希望出现该网页的标题。
/**
* 注入js隐藏部分div元素,多个操作用多个js去做才能生效
*/
private void hideHtmlContent()
{
//修改文本,可以注入任意的html代码,我是直接注入一段带样式的文本节点,表现良好
String javascriptq = "javascript:function modifyText() {" +
"var headers = document.getElementsByClassName('logo');" +
"var lastHeader = headers[headers.length-1];" +
"lastHeader.innerHTML='极光影院';" +
"}";
//隐藏元素
String javascript = "javascript:function hideOther() {" +
"var headers = document.getElementsByClassName('logo');" +
"var lastHeader = headers[headers.length-1];" +
"lastHeader.remove();" +
"}";
//创建方法
mWebView.loadUrl(javascriptq);
mWebView.loadUrl(javascript);
//加载方法
mWebView.loadUrl("javascript:modifyText();");
mWebView.loadUrl("javascript:hideOther();");
}
最后重写webviewClient()中的onLoadResource()方法和webviewChromeClient()里的onProgressChanged()方法,在里面直接调用上述的hideHtmlContent()方法即可。
参考链接:安卓webview注入js修改网页文本或添加其他元素