Android WebView与Javascript的交互

WebView与Javascript的交互

前言

在android开发中，经常遇到这样的需求：

1. 点击WebView中的一张图片跳转到另外一个Activity页面展示图片
2. 图片可左右滑，浏览该网页页面的其他的图片

以开发者的眼光看待这个问题，从现象分析需要传递的数据。
首先，左右滑动的页面可以用ViewPager来实现，只要传入一个url列表；其次，你需要定位到当前点中的图片的位置，所以还需要传递当前点击图片的位置，或者当前图片的url。

那么，怎么实现点击WebView的时候，从网页中取出这些数据呢？

WebView与Js的交互

package com.noonecode.jswebviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import java.util.Arrays;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    //测试的带许多图片的url
    public static final String mUrl = "http://sports.gmw.cn/2016-11/04/content_22814737.htm";

    //ButterKnife注解代替手动书写findViewById
    @BindView(R.id.wv)
    WebView mWv;
    @BindView(R.id.pb)
    ProgressBar mPb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initViews();
    }

    private void initViews() {
        mWv.getSettings().setJavaScriptEnabled(true);
        mWv.loadUrl(mUrl);//带图片网址
        mWv.addJavascriptInterface(new MyJavascriptInterface(), "local_fun");//这里设置了Js的回调接口，注意
        mWv.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;//url在WebView中打开
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                mPb.setVisibility(View.GONE);
                addImgListener();//设置监听
            }
        });
    }

    /**
     * 返回单张图片url的点击监听
     */
    private void addImgListener() {
        mWv.loadUrl("javascript:(function(){" +
                "var obj_imgs = document.getElementsByTagName(\"img\"); " +
                "for(var i=0; i +
                "    obj_imgs[i].onclick=function(){" +
                "        window.local_fun.recImg(this.src);" +
                "    }" +
                "}" +
                "})()");
    }


    public class MyJavascriptInterface {

        /**
         * 一张图片的回调
         */
        @JavascriptInterface
        public void recImg(String url) {
            Log.e("recImg", url);
        }
    }
}

网页完全加载完成后点击的效果：

这里，就已经完成点击一个WebView的图片，js会回调给java的回调函数中（这里简单的打印出来，读者拿到这个url，可以自行完成自己的逻辑）。


如果你还有或者整个列表的功能，请继续往下看~~~

WebView与Js的交互2

package com.noonecode.jswebviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import java.util.Arrays;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    public static final String mUrl = "http://sports.gmw.cn/2016-11/04/content_22814737.htm";

    @BindView(R.id.wv)
    WebView mWv;
    @BindView(R.id.pb)
    ProgressBar mPb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initViews();
    }

    private void initViews() {
        mWv.getSettings().setJavaScriptEnabled(true);
        mWv.loadUrl(mUrl);
        mWv.addJavascriptInterface(new MyJavascriptInterface(), "local_fun");
        mWv.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                mPb.setVisibility(View.GONE);
                addImgsListener();
            }
        });
    }

    /**
     * 返回所有图片url的点击监听
     */
    private void addImgsListener() {
        mWv.loadUrl("javascript:(function(){" +
                "var obj_imgs = document.getElementsByTagName(\"img\"); " +
                "var arr_urls = [];" +
                "for(var i=0; i +
                "    arr_urls[i] = obj_imgs[i].src; " +
                "    obj_imgs[i].onclick=function(){ " +
                "        window.local_fun.recImgs(arr_urls, this.src);" +
                "    }" +
                "}" +
                "})()");
    }

    public class MyJavascriptInterface {
        /**
         * 一堆图片的回调,带所有的url，和当前的url
         */
        @JavascriptInterface
        public void recImgs(String[] list, String url) {
            Log.e("recImgs", Arrays.toString(list));
            Log.e("recImgs", "current---->" + url);
        }
    }
}

通过对比，大家可以发现，只是多了在js中获取所有的img标签的src属性的逻辑，改一下回调的参数就可把网页中的所有url和当前url回调出来~~

这里主讲WebView和Js的交互，没有继续写具体拿到数据放到ViewPager展示的效果，大家可根据需求，继续引申~~

注意

这里的逻辑是在java代码中书写js回调，点击获得所有的img标签的src属性。具体不同的网页，不同的需求，可能需要书写不同的js代码。不可硬套。

（完毕）