WebView控件點(diǎn)擊圖片事件

在WebView中加載的是Html也面,在開(kāi)發(fā)中都是Web前端人員寫(xiě)好以后給個(gè)鏈接我們?nèi)ビ脀ebView進(jìn)行l(wèi)oadUrl。但是有時(shí)突然產(chǎn)品想讓你把加載回來(lái)的圖片進(jìn)行大圖的展示,比如單擊或者長(zhǎng)按查看大圖,但是webView控件的點(diǎn)擊事件并沒(méi)有作用?。?!以下是實(shí)現(xiàn)的思路
  • 首先我們拿到html中加載圖片的標(biāo)簽img.
  • 然后取出其對(duì)應(yīng)的src屬性
  • 循環(huán)遍歷設(shè)置圖片的點(diǎn)擊事件
  • 將src作為參數(shù)傳給java代碼
//java回調(diào)js代碼,不要忘了@JavascriptInterface這個(gè)注解,不然點(diǎn)擊事件不起作用
mWebView.addJavascriptInterface(new JsCallJavaObj() {
            @JavascriptInterface
            @Override
            public void showBigImg(String url) {
                Toast.makeText(mContext, "圖片路勁"+url, Toast.LENGTH_SHORT).show();
                Intent intent = new Intent(mContext, BigImageActivity.class);
                intent.putExtra(Constants.IMG_URL,url);
                startActivity(intent);
            }
        },"jsCallJavaObj"); 
 mWebView.setWebViewClient(new WebViewClient(){
            @Override
      public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                setWebImageClick(view);
            }
        });
         /**
     * 設(shè)置網(wǎng)頁(yè)中圖片的點(diǎn)擊事件
     * @param view
     */
    private  void setWebImageClick(WebView view) {
        String jsCode="javascript:(function(){" +
                "var imgs=document.getElementsByTagName(\"img\");" +
                "for(var i=0;i<imgs.length;i++){" +
                "imgs[i].onclick=function(){" +
                "window.jsCallJavaObj.showBigImg(this.src);" +
                "}}})()";
        mWebView.loadUrl(jsCode);
    }

     /**
     * Js調(diào)用Java接口
     */
    private interface JsCallJavaObj{
        void showBigImg(String url);
    }

實(shí)現(xiàn)功能的核心就是這段Js代碼,也就是jsCode這個(gè)變量。通過(guò)document對(duì)象的getElementsByTagName方法去獲取到img標(biāo)簽。然后通過(guò)循環(huán)去遍歷設(shè)置其對(duì)應(yīng)的點(diǎn)擊事件。

window.jsCallJavaObj.showBigImg(this.src) 其中jsCallJavaObj是我們?cè)趈ava代碼中所定義的一個(gè)接口的對(duì)象,showBigImg()是這個(gè)接口中的回調(diào)方法。this.src就是當(dāng)前點(diǎn)擊圖片的url.

注意:上面的js代碼書(shū)寫(xiě)一定不能有誤,不然就做了無(wú)用功了,以javascript:(參數(shù))開(kāi)始,以()結(jié)束。
原文鏈接:https://blog.csdn.net/Jiang_Rong_Tao/article/details/58586041

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容