Android Webview隐藏部分div

柔情只为你懂 2024-03-24 13:45 45阅读 0赞

## Android `Webview`隐藏部分div ##

#### 1.实现方法： ####

在网页加载结束后，注入`js`隐藏或移除部分div

#### 2.`js`中document节点获取页面元素： ####

##### 1.querySelector()方法 #####

描述：本方法用于根据给定的选择器选中页面元素

如果有多个元素满足条件，则返回第一个满足条件的元素节点

语法：document.querySelector(‘选择器名’);

注意：如果查找失败，返回null

##### 2.querySelectorAll()方法 #####

描述：本方法用于根据给定的选择器选中页面元素

如果有多个元素满足条件，则返回这些元素构成的集合

语法：document.querySelectorAll(‘选择器名’);

注意：

(1)返回的结果是一个节点列表，不是数组，但能够像使用数组一样使用列表  
(2)如果查找失败，返回一个空的节点列表(.length==0)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>document节点获取页面元素</title>
    	</head>
    	<body>
    		<div id="div">我是第一个div</div>
    		<div class="div">我是第二个div</div>
    		<div>我是第三个div</div>
    		<p>我是p标签</p>
    		<h2>我是h2标签</h2>
    		<button name="aaa">我是button</button>
    	</body>
    	<script type="text/javascript">
    		var div = document.querySelector('#div');
    		console.log(div); //<div class="div">我是第二个div</div>
    		
    		var div = document.querySelector('div');
    		console.log(div); //<div id="div">我是第一个div</div>
    		
    		var divList = document.querySelectorAll('div');
    		console.log(divList); //NodeList(3) [div#div, div.div, div]
    		console.log(divList[1]); //<div class="div">我是第二个div</div>
    		console.log(divList.length); //3	
    	</script>
    </html>

##### 3.getElementById()方法 #####

描述：根据指定的id名选中页面元素

如果存在多个指定 满足条件元素，则返回第一个元素节点

语法：document.getElementById(‘id名’);

注意：如果查找失败，返回null

##### 4.getElementsByClassName()方法 #####

描述：根据指定的类名选中页面中所有满足条件的元素

语法：document.getElementsByClassName(‘类名’);

注意：返回结果是一个有顺序的节点列表，可以通过索引来访问列表中的元素(索引从0开始)

##### 5.getElementsByTagName()方法 #####

描述：根据指定的标签名选中页面中所有满足条件的元素

语法：document.getElementsByTagName(‘标签名’);

注意：如果参数值为’\*',则返回文档中的所有元素

##### 6.getElementsByName()方法 #####

描述：根据指定的name值选中页面中所有满足条件的元素

语法：document.getElementsByName(‘name属性’);

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>document节点获取页面元素</title>
    	</head>
    	<body>
    		<div id="div">我是第一个div</div>
    		<div class="div">我是第二个div</div>
    		<div>我是第三个div</div>
    		<p>我是p标签</p>
    		<h2>我是h2标签</h2>
    		<button name="aaa">我是button</button>
    	</body>
    	<script type="text/javascript">
    		var a = document.getElementById('div');
    		console.log(a); //<div id="div">我是第一个div</div>
    		
    		var b = document.getElementsByClassName('div');
    		console.log(b); //HTMLCollection [div.div]
    		
    		var c = document.getElementsByTagName('p');
    		console.log(c); //HTMLCollection [p]
    		
    		var d = document.getElementsByName('aaa');
    		console.log(d); //NodeList [button]		
    	</script>
    </html>

#### 3.代码： ####

@Override
    public void onPageFinished(WebView view, String url) {
    	...
    	view.loadUrl("javascript:(function() { " +
                                        //打开浏览器的弹框
                                        "var b= document.getElementsByClassName('awap-shadowbox')[0].style.display='none'; " +
                                        "var b= document.getElementsByClassName('awap-shadowbox')[0].remove(); " +
                                        
                                        "document.getElementsByClassName('read_more_btn')[0].click(); " +
                                        "document.getElementsByClassName('btn_xxx_div')[0].style.display='none'; " +
                                        "var x = document.getElementsByClassName('hide-xx'); " +
                                        " document.getElementById('footer').remove();"+
                                        "var i;\n" +
                                        "for (i = 0; i < x.length; i++) {\n" +
                                        "    x[i].click();\n" +
                                        "} " +
                                        "})()");
    }

#### 4.具体做法 ####

有时候设置 部分标签 的属性，不生效，可能找的不对或者是标签不能操作，耐心找找。

**最好通过浏览器打开你需要操作的网页，使用手机模式查看网页源码，使用箭头找标签的具体id或class**

#### 5.参考链接 ####

[js中document节点获取页面元素的六种方式][js_document]

[如何去掉或者修改网页中的遮罩层，DIV等元素？][DIV]

[Android WebView有封装工具类][Android WebView]

[Android Webview 去除标题（指定标签里的内容）][Android Webview]

[kt][]

[js_document]: https://blog.csdn.net/weixin_55992854/article/details/116887603
[DIV]: https://www.likecs.com/show-204817454.html
[Android WebView]: https://www.jianshu.com/p/3bacb6342f45
[Android Webview]: https://www.jianshu.com/p/06c8310bdac6
[kt]: https://blog.csdn.net/asdrt12589wto1/article/details/106440453