Android-webview加載網頁去除标題

問題描述:

在進行app開發時,我們會經常遇到webview加載一個網址的情況,但是僅僅是webview.loadUrl()并不能滿足我們的需求,因為一般網頁上面都有一個标題,,标題的顔色和我們的app風格可能整體都不太搭,這個時候該怎麼辦?除了讓web端的朋友們專門寫一個的情況下,還有另外一個方法，就是利用js或者jquery處理，原理都是一樣，這裡隻講一下js。

先看一下效果圖:

這是web端網頁的加載頁面：

這是webview.loadUrl()的資料加載後的頁面：

這是項目要求的去掉标題的頁面：

解決思路:

利用js互動,将webview加載的URL的頁面html做一些修改,例如将顯示标題的一部分置空.關鍵點在于找到html中展示标題的節點

那麼我們的解決步驟就是:

1.将webview加載的URL在浏覽器上打來,滑鼠右鍵單擊,檢視頁面源代碼,可以看到頁面的布局資訊,可以确定我們要删除的标題的代碼所在的位置

2.自己定義WebViewClient,去取代系統對webview加載頁面的處理,重寫WebViewClient的

2.onPageFinished()中編輯javascript函數将顯示标題的部分置空或者删除,并調用onPageFinished()方法

3.onPageFinished()中顯示被JavaScript處理過的網頁資料

檢視頁面源碼，找出要移除的代碼段：

WebView處理：

WebView webView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);

        webView.loadUrl("http://www.lymidas.com/Home/DataCenter?currentId=1");

        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);


                //編寫 javaScript方法
                String javascript =  "javascript:function hideOther() {" +
                        "document.getElementsByTagName('body')[0].innerHTML;" +
                        "document.getElementsByTagName('div')[0].style.display='none';" +
                        "document.getElementsByTagName('div')[3].style.display='none';" +
                        "document.getElementsByClassName('dropdown')[0].style.display='none';" +
                        "document.getElementsByClassName('min')[0].remove();" +
                        "var divs = document.getElementsByTagName('div');" +
                        "var lastDiv = divs[divs.length-1];" +
                        "lastDiv.remove();" +
                        "document.getElementsByClassName('showme')[0].remove();" +
                        "document.getElementsByClassName('nei-t3')[1].remove();}";

                //建立方法
                view.loadUrl(javascript);

                //加載方法
                view.loadUrl("javascript:hideOther();");
            }
        });
           

總結：

   這裡要注意幾個地方：

       第一點：

       上面javaScript方法中：

        getElementByTagName("xxx")是通過标簽的名稱擷取

        getElementByClassName("xxx")是擷取标簽上定義的class名稱擷取

       第二點：

       有的時候，網頁上檢視頁面源代碼看到的html内容 和 手機上處理頁面内容不太一樣，差別就在于網頁上帶有  Class的标簽，在手機上加載時，Class标簽就不見了，造成的後果是明明使用getElementByClassName（“”XXX“”）.remove()處理過了，但是沒有起作用。這個時候的解決方法是使用getElementByTagName("xxx")是通過标簽的名稱擷取，然後remove().

        檢視webview上加載網頁的頁面源碼是看這篇部落格http://blog.csdn.net/qq_32452623/article/details/52182964

        關于，為什麼出現這種情況的原因還不知道，如果有朋友知道，請告訴我一下，先謝謝了。

        PS:

        可能的原因(1):

手機加載的網頁和你在pc加載的網頁位址不一樣，當你用手機加載的時候，會自動重定向到m.xx.com這樣的站點（m指mobile加載的，網頁加載時一般是www.xx.com）。(這裡要謝謝無緣公子的評論告知)

         第三點：

         這種去标題的方式有個小不美的地方,因為本質是加載兩次Url,一次是原本的Url,一次是處理過的URL  ,是以剛進入頁面加載的是帶标題的,過了一段時間是閃爍一下,加載顯示的是操作後的Url.

         關于這個閃爍的處理,我想了兩種方式:

         1.将webview先隐藏,加載完成後再顯示.

         2.考慮在onPageStarted()方法中顯示了等待框緩沖一下.

         但是都有個問題,如果判斷第二次加載URL結束,直接在onPagefinished()中view.loadurl()語句後面是不可行的,因為裡面是開了線程 異步執行的.這個問題暫時還是沒有解決.

      最後 附上我寫這篇部落格的時候測試的小Demo,傳送位址http://download.csdn.net/detail/qq_32452623/9612074