Android 點擊WebView圖片預覽圖片

1. 概述

在實際開發中，我們可能會遇到用webview去展示一篇文章或者其他內容，然後我們需要點擊裏面的圖片能夠展示出來，這就是我們今天的重點–點擊webview的圖片進行展示。先看一個效果圖。

2.流程分析

1.用webview加載文章；
2.點擊圖片某個圖片獲取當前圖片的url和所有圖片的url；
3.將所有圖片用ViewPager展示出來。

3.代碼實現

3.1 添加權限：

<uses-permission android:name="android.permission.INTERNET" />


3.2 添加依賴：

implementation 'com.github.bumptech.glide:glide:4.7.1'

3.3 代碼實現：

先看MainActivity的代碼：

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.wv_webview);
        initWebConfig();
        webView.loadUrl("http://m.pocoimg.cn/works/works_detail?works_id=20001630&app_blog=1");

    }

    private void initWebConfig() {
        webView.addJavascriptInterface(new MJavascriptInterface(this), "imagelistener");//將js對象與java對象進行映射
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);//設置java與js交互
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setDisplayZoomControls(false);
        webSettings.setDefaultTextEncodingName("utf-8");
        webSettings.setDomStorageEnabled(true);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }


            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                addImageClickListener(view);//待網頁加載完全後設置圖片點擊的監聽方法
            }
        });
    }

    /**
     * 設置圖片點擊事件
     *
     * @param webView
     */
    private void addImageClickListener(WebView webView) {
        //"cc_detail_blog_img"這個ClassName和前端對應的，前端那邊不能修改，對應的是img的ClassName
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByClassName(\"cc_detail_blog_img\"); " +
                " var array=new Array(); " + " for(var j=0;j<objs.length;j++){ " + "array[j]=objs[j].src;" + " }  " +
                "for(var i=0;i<objs.length;i++)  " +
                "{" +
                "  objs[i].onclick=function()  " +
                "  {  " +
                "    window.imagelistener.openImage(this.src,array);  " +
                "  }  " +
                "}" +
                "})()");
    }
}

從代碼裏面可以看出主要是做了webview的初始化，並在onPageFinished回調方法添加了圖片的點擊事件。

addImageClickListener的代碼實現很簡單，通過js找到相應的所有的img，然後爲這些圖片設置點擊監聽事件——>每當點擊時調用自定義的openImage(url)方法。這個openImage(this.src,array)方法與MJavascriptInterface中對應的方法交相輝映，這樣就形成了js調用本地的方法。

再看看MJavascriptInterface代碼（主要爲與js對應的本地方法的實現）

public class MJavascriptInterface {
    private Activity context;
    private static final String TAG="SIMON";
    public MJavascriptInterface(Activity context) {
        this.context = context;
    }

    @android.webkit.JavascriptInterface //必須添加
    public void openImage(String img, String[] array) {
        Log.i(TAG, "openImage: "+img);
        for (String imgUrl:array){
            Log.i(TAG, "openImage: "+imgUrl);
        }
        Intent intent = new Intent(context, ViewPhotoActivity.class);
        intent.putExtra("imageUrls", array);
        intent.putExtra("curImg", img);
        context.startActivity(intent);
    }
}

最後在另外一個activity用ViewPager展示出來，比較簡單。

特別注意：項目中暴露的js接口類：MJavascriptInterface不能混淆，其調用的方法的聲明也不能混淆！

最後附上gayhub的地址：github地址 ！