Android实现webview与js交互显示内容并且实现图片点击监听

在这里插入图片描述
1:布局使用webview显示

 <WebView
                android:id="@+id/recy_webview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

2:代码实现

 //图文混合
 //要显示的接口数据
        String content = data.getContent();
        WebSettings settings = recyWebview.getSettings();
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html中的内容放大webview等宽的一列中
        settings.setJavaScriptEnabled(true);//支持js
        recyWebview.setHorizontalScrollBarEnabled(false);//水平不显示
        recyWebview.setVerticalScrollBarEnabled(false);//垂直不显示
        String con = "<html><head><style>img{width:100% !important;}</style></head><body style='margin:0;padding:0'>" + content + "</body></html>";
        recyWebview.loadDataWithBaseURL("about:blank", con, "text/html", "utf-8", null);
        //实现文章中图片点击监听
        recyWebview.addJavascriptInterface(new MJavascriptInterface(getActivity()), "imagelistener");
        recyWebview.setWebViewClient(new MyWebViewClient());

  @Override
    protected void onDestroy() {
    
    
        if (webviewcontent != null) {
    
    
            //再次打开页面时,若界面没有消亡,会导致进度条不显示并且界面崩溃
            webviewcontent.stopLoading();
            webviewcontent.onPause();
            webviewcontent.clearCache(true);
            webviewcontent.clearHistory();
            webviewcontent.removeAllViews();
            //先结束未结束线程,以免可能会导致空指针异常
            webviewcontent.destroy();
            webviewcontent = null;
        }
        super.onDestroy();
    }
public class MyWebViewClient extends WebViewClient {
    
    
    @Override
    public void onPageFinished(WebView view, String url) {
    
    
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageFinished(view, url);
        addImageClickListener(view);//待网页加载完全后设置图片点击的监听方法
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
    
    
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageStarted(view, url, favicon);
    }

    private void addImageClickListener(WebView webView) {
    
    
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "    objs[i].οnclick=function()  " +
                "    {  "
                + "        window.imagelistener.openImage(this.src);  " +//通过js代码找到标签为img的代码块,设置点击的监听方法与本地的openImage方法进行连接
                "    }  " +
                "}" +
                "})()");
    }
}

public class MJavascriptInterface {
    
    
    private Context context;

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

    @android.webkit.JavascriptInterface
    public void openImage(String img) {
    
    
        Log.v("openImage", "" + img);
        //拿到图片进行跳转页面显示
        Intent intent = new Intent(context, LargerImageActivity.class);
        intent.putExtra("image", img);
        context.startActivity(intent);
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_43117800/article/details/108596442
今日推荐