有兩周沒寫簡書了，有一丟丟懶惰了，還是要堅持下來啊
廢話不多說，進入主題

需求

現在有一個類似聚合閱讀的APP里面的文章都是以WebView來顯示內容
用戶點擊文章中的圖片會進入到查看圖片的頁面

問題

根據Android Hybrid的想法，需要在HTML頁面中提供讓Android調用的js方法，但是在的HTML中并沒有提供讓Android調用的方法的時候該怎么實現功能。

思路

1. 使用WebView的js注入，為HTML加入js函數監聽
2. 在Android中添加當觸發HTMl中js方法的接口

實現

布局就一個webview，這里就不貼出了
MainActivity.java

public class MainActivity extends AppCompatActivity
{

    private static final String URL = "http://www.lxweimin.com/p/c51174efd824";
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.wv_test);
        //獲得webview的設置，并設置webview支持js
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new MyWebViewClient());
        webView.addJavascriptInterface(new scriptInterface(MainActivity.this), "imagelistner");
        webView.loadUrl(URL);
    }


    // WebViewClient監聽
    private class MyWebViewClient extends WebViewClient
    {
        @Override
        public void onPageFinished(WebView view, String url)
        {
            // html加載完成之后，添加監聽圖片的點擊js函數
            addImageClickListner();
        }
    }

    /**
     * WebView與JS交互
     **/
    // 注入js函數監聽
    @android.webkit.JavascriptInterface
    private void addImageClickListner()
    {
        // 這段js函數的功能就是，遍歷所有的img標簽，并添加onclick函數，在還是執行的時候調用本地接口傳遞url過去
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); "
                + "for(var i=0;i<objs.length;i++)  " +
                "{" + "    " +
                "objs[i].onclick=function()  " + "    " +
                "{  "
                + "        window.imagelistner.openImage(this.src);  " + "   " +
                " }  " + "}" + "})()");
    }

    // js通信接口
    class scriptInterface
    {

        private Context context;

        public scriptInterface(Context context)
        {
            this.context = context;
        }

        @android.webkit.JavascriptInterface
        public void openImage(String img)
        {
            //模擬點擊跳轉
            Toast.makeText(MainActivity.this, "點擊了圖片" + img,
                    Toast.LENGTH_SHORT).show();
        }
    }
    
}

效果

demo