AndroidWebView的使用

最新推荐文章于 2025-08-15 15:43:57 发布

原创最新推荐文章于 2025-08-15 15:43:57 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #webview #javascript

Android 专栏收录该内容

86 篇文章

订阅专栏

本文介绍 Android WebView 的使用方法，包括如何配置 WebView 来支持 JavaScript、缩放及自适应屏幕等功能，实现图片点击事件的监听与处理，以及如何通过 JavaScript 接口与原生代码进行交互。

android Webview 的使用

private WebSettings webSettings;
private JavaScriptInterface javascriptInterface;

javascriptInterface = new JavaScriptInterface(this);
webSettings = webView.getSettings();
//是否支持js
webSettings.setJavaScriptEnabled(true);
// 设置支持缩放
webSettings.setSupportZoom(true);
//显示图片时自适应屏幕大小,但是4.4以前好用,4,4以后不好用
//mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
//weView中有链接,在当前 browser 中相应
webView.setWebViewClient(new MyWebViewClient());
//设置进度条,处理提示框
webView.setWebChromeClient(new MyWebChromeClient());
//添加监听
webView.addJavascriptInterface(javascriptInterface, "imagelistner");
webView.loadDataWithBaseURL(null,bean.getContent(), "text/html", "utf-8", null);

// js通信接口
public static class JavaScriptInterface {

    private Context context;
    public JavaScriptInterface(Context context) {
        this.context = context;
    }

    //点击图片回调方法
    //必须添加注解,否则无法响应
    @JavascriptInterface
    public void openImage(final String img) {
        System.out.println(img);
        Log.i("TAG", "响应点击事件!");
        Intent intent = new Intent();
        intent.putExtra("image", img);

        System.out.println(img);
        ((Activity) mContext).runOnUiThread(new Runnable() {
            @Override
            public void run() {
                showImg(img);

            }
        });
    }

    public void showImg(final String img) {
        final AlertDialog dialog = new AlertDialog.Builder(mContext).create();
        final ImageView imgView = getImageView();
        Glide.with(mContext).load(img).placeholder(R.mipmap.loading_placeholder_img).crossFade().into(imgView);
        dialog.setView(imgView);
        dialog.show();
        imgView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
    }

    private ImageView getImageView() {
        ImageView imgView = new ImageView(mContext);
        imgView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        imgView.setScaleType(ImageView.ScaleType.FIT_XY);
        return imgView;
    }

}

private class MyWebViewClient extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // html加载完成之后，添加监听图片的点击js函数
        addImageClickListner();
        imgReset();
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}


/**
 * 循环遍历标签中的图片
 * js 语法
 */
private void imgReset() {
    webView.loadUrl("javascript:(function(){" +
            "var objs = document.getElementsByTagName('img'); " +
            "for(var i=0;i<objs.length;i++)  " +
            "{" + "var img = objs[i];   " +
            "    img.style.maxWidth = '100%';   " +
            "}" +
            "})()");
}

/**
 * 设置进度条和提示框
 */
private class MyWebChromeClient extends WebChromeClient {
    //该方法中可以设置进度条
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
    }

    //发方法中可以处理提示框
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
}

// 注入js函数监听
private void addImageClickListner() {
    // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递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);  " +
            "    }  " +
            "}" +
            "})()");
}