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吧。