原諒我無恥地改寫了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大牛經過指點一二…