WebView与JS的那些事：注入JS提取页面图片

最新推荐文章于 2024-05-13 14:40:48 发布

codelang

最新推荐文章于 2024-05-13 14:40:48 发布

阅读量2.2k

点赞数

分类专栏：安卓学习文章标签： android webview 注入js

本文链接：https://blog.csdn.net/u013000152/article/details/70314767

版权

安卓学习专栏收录该内容

40 篇文章 0 订阅

订阅专栏

上一篇博文中，我们大概了解了js与webview的一些交互，然而，在我们实际的应用中，更倾向于在android端对网页做一些处理，今天带给大家的是往页面注入JS脚本，提取页面上的图片，然后通过另一个Activity显示图片。

首先来看看效果，提提神。

这里写图片描述

首先我们来分析分析这么做的一些处步骤：
1、查找网页所有的图片控件
2、给所有的图片控件添加一个onClick点击事件
3、点击图片的onClick事件是js调用android内部的方法，并将src带给android
4、android实现跳转页面，加载src的图片。

我们在网页中设置一个图片，一般都是用如图的方式在页面上显示一个图片，我们的最终目的是拿到img.jpg这个图片链接，

这里写图片描述

我们知道，一个页面中会有很多很多的img标签和src属性，我们要全部拿到，必须使用js的getElementsByTagName方法。

<html>
    <body>
        <img src="img/lang.jpg" />
        <img src="img/chat-1.png" />
    </body>
    <script>
    function getImage(){
        var img = document.getElementsByTagName("img");
        for(var i = 0; i < img.length; i++) {
            var a = document.getElementsByTagName("img")[i];
            a.onclick = function() {
                alert(a.src);
            };
        }
     }
     getImage();
    </script>
</html>

效果

这里写图片描述

我们通过getElementsByTagName去遍历页面的所有img标签，返回的是一个数组类型，然后通过数组遍历每一个节点，然后给每个节点添加一个onClick参数，并且设置点击传递的参数为src图片链接，我们测试了一下，先用alert去显示图片的链接，发现正如自己所想，拿到了期待的值。

现在，我们要把这段js代码放到android中去，我们既然要遍历整个网页，必须得在网页全部加载完成的时候才能遍历到数据，我们在上一篇说到webview的加载完成回调onPageFinished方法，现在我们把js代码放到这个方法里面去加载。

   @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //添加js代码
                 view.loadUrl("javascript:function img(){" +
                        "var href=document.getElementsByTagName(\"img\");" +
                        "\t\t for(var i=0;i<href.length;i++){\n" +
                        "\t\t \t   var a=document.getElementsByTagName(\"img\")[i];\n" +
                        "\t\t \t   a.onclick=function(){\n" +
                        "\t\t \t        window.jsAndroid.onShowImage(this.src)" +
                        "\t\t \t   };\n" +
                        "\t\t }" +
                        "}");
                //执行js函数
                view.loadUrl("javascript:img()");

原来网页测试的alert替换成了调用原生代码的操作，并将src传递给android onShowImage函数，我们再来看看onShowImage，

 class JSObject {

        @JavascriptInterface
        public void onShowImage(String src) {
            Intent intent = new Intent(MainActivity.this, ImageActivity.class);
            intent.putExtra("src", src);
            startActivity(intent);
        }
    }

该类特别简单，就是拿这个链接跳转另一个Activity去显示，我此处用的是Glide去加载的url。

整体代码

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initWeb();
        initSetting();
         webView.addJavascriptInterface(new JSObject(), "jsAndroid");
         }
    private void initWeb() {
        webView = (WebView) findViewById(R.id.webview);
          webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                  view.loadUrl("javascript:function img(){" +
                        "var href=document.getElementsByTagName(\"img\");" +
                        "\t\t for(var i=0;i<href.length;i++){\n" +
                        "\t\t \t   var a=document.getElementsByTagName(\"img\")[i];\n" +
                        "\t\t \t   a.onclick=function(){\n" +
                        "\t\t \t        window.jsAndroid.onShowImage(this.src)" +
                        "\t\t \t   };\n" +
                        "\t\t }" +
                        "}");
                view.loadUrl("javascript:img()");
                   }
        });
    }
 private void initSetting() {
        seting = webView.getSettings();
        seting.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        seting.setJavaScriptCanOpenWindowsAutomatically(true);
        //防止中文乱码
        seting.setDefaultTextEncodingName("UTF-8");
        //设置webview的缓存
        seting.setCacheMode(WebSettings.LOAD_NO_CACHE);
    }

  class JSObject {
   @JavascriptInterface
        public void onShowImage(String src) {
            Intent intent = new Intent(MainActivity.this, ImageActivity.class);
            intent.putExtra("src", src);
            startActivity(intent);
        }
    }

ok，这样就实现了所需要的效果了，主要还是js代码的设计，下一篇，还有惊喜哟！

codelang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WebView与JS的那些事：注入JS提取页面图片

上一篇博文中，我们大概了解了js与webview的一些交互，然而，在我们实际的应用中，更倾向于在android端对网页做一些处理，今天带给大家的是往页面注入JS脚本，提取页面上的图片，然后通过另一个Activity显示图片。首先来看看效果，提提神。首先我们来分析分析这么做的一些处步骤： 1、查找网页所有的图片控件 2、给所有的图片控件添加一个onClick点击事件 3、点击图片的onClick
复制链接

扫一扫

专栏目录