WebView與JS的那些事: 注入JS提取url鏈接

上篇博文中，我們已經知道了如何通過js去控制webview中一些頁面的變化和操作，今天，我們來玩一個更好玩的，或許有玩過掘金客戶端的都知道，我們在點擊頁面的時候，掘金客戶端並不是直接在webview頁面進行加載，而是通過打開另一個Activity進行呈現，忽然發現這種方式真的挺不錯的，玩過webview的都知道，我們在做一個頁面的前進和後退時，我們會因爲goBack返回頁面的時候，頁面會進行重新加載，造成體驗不太舒服，雖然有解決方法，但是，頁面一直都處於當前Activity狀態，給用戶的感覺就是這個和瀏覽器有啥區別，感覺太枯燥。所以爲了解決這些問題，我看了淘寶客戶端在處理這些頁面的時候也是跳轉一個新的Activity去加載這個url，感覺體驗還是很不錯的，所以，今天小試了一下，分享出來。

---

效果圖：

該部分主要講js的注入，代碼如何組織可以看上篇文章，該篇只需在上一篇的onPageFinished的回調中添加js代碼即可。

還是老規矩，對於js的操作，我們還是先在html代碼中測試一下，然後再應用到android中。

我們先給出個錯誤的示範，然後再給正確的示範，如果我們按照上一篇獲取圖片那麼玩的話，那代碼就如下。

var href = document.getElementsByTagName("a");
        for(var i = 0; i < href.length; i++) {
            var a = document.getElementsByTagName("a")[i];
            a.onclick = function() {
                alert(a.href);
            };
        }

看看效果圖：

大家看懂錯誤的地方在哪了嗎？如果我們應用了這段js代碼，那麼我們在webview中使用的話，即使我們打開了一個新的Activity，但是，原來的webview還是會繼續加載，等我們返回查看上一個頁面的時候，我們發現，怎麼和我們退出來的界面一樣的呢，我們的目的應該是能獲取到alert提示出來的url鏈接，但是，不能讓當前頁面去刷新，然後將這個url交給另一個開啓的Activity去webView加載處理。

我們知道，我們在網頁開發中，a標籤在有href屬性的時候就具有網頁跳轉的意思，即使href屬性值爲空，他也會發生刷新，只不過不跳轉，而是在當前頁面進行刷新，這種效果在webview中也是不能存在，我們不允許在跳轉Activity的，之前的頁面發生刷新，可是，網頁中的代碼都有href屬性。

所以我們首先要做的就是禁止掉這個href的觸發，我查看了一下js的使用，找到了禁止href使用的代碼

所以，我接下來把代碼這麼改了一下

var href = document.getElementsByTagName("a");
        for(var i = 0; i < href.length; i++) {
            var a = document.getElementsByTagName("a")[i];
            a.href="javascript:void(0)";
            a.onclick = function() {
                alert(a.href);
            };
        }

然後試着運行了一下，我的天，怎麼alert出來的全是javascript:void(0)，之前的url全沒了，後來一想，確實也對，爲了禁止href的觸發，我把href全替換成了javascript:void(0)，所以，這樣的錯誤肯定是不可避免的，這段代碼也不對。

禁止href肯定是對的， 關鍵在於如何去處理這個url鏈接，後來我一想，既然鏈接不能放在href，我換個屬性放不就行了嘛，然後alert的時候，直接去找存放的那個屬性拿不就行了嗎，那就馬上動手操作，我把代碼改成如下方式。

var href = document.getElementsByTagName("a");
        for(var i = 0; i < href.length; i++) {
            var a = document.getElementsByTagName("a")[i];
            a.onclick = function() {
                alert(a.value);
            };
            a.value = a.href;
            a.href = "javascript:void(0)";
        }

結果如圖：

哈哈，沒有發生刷新，而且還拿到了鏈接，這就是我們需要的結果，那就趕緊應用到代碼上面吧，下面就貼出主要部分的代碼。

   @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                 view.loadUrl("javascript: function next(){" +
                        "var href=document.getElementsByTagName(\"a\");\n" +
                        "\t\t for(var i=0;i<href.length;i++){\n" +
                        "\t\t \t   var a=document.getElementsByTagName(\"a\")[i];\n" +
                        "\t\t \t   a.οnclick=function(){\n" +
                        "\t\t \t   \t\t window.jsAndroid.onNextPage(this.value);\n" +
                        "\t\t \t   };\n" +
                        "\t\t \t   a.value=a.href;" +
                        "\t\t \t   a.href=\"javascript:void(0)\";\n" +
                        "\t\t }" +
                        "}");

                view.loadUrl("javascript:next()");
             }

 class JSObject {
        @JavascriptInterface
        public void onNextPage(String href) {
            Log.i(TAG, "href---------->" + href);
            Intent intent = new Intent(MainActivity.this, MainActivity.class);
            intent.putExtra("url", href);
            startActivity(intent);
        }
   }

ok搞定，看我截圖的肯定還會有一個發現，我把獲取圖片的js也放在上面去了，趕緊mark吧。