Webview和js交互

最新推荐文章于 2024-06-05 20:11:08 发布

pan_blog

最新推荐文章于 2024-06-05 20:11:08 发布

阅读量315

点赞数

本文链接：https://blog.csdn.net/Peterpan1223/article/details/77990142

版权

简单的webview和js交互

1.首先看下js代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>调用Android组件测试</title>
    </head>

    <body>
        <b>测试</b>
        <script>
            function callJs() {
                alert("Android调用了JS的callJS方法");
            }

            function callAndroid() {
                // 由于对象映射，所以调用test对象等于调用Android映射的对象
                test.hello("js调用了android中的hello方法");
            }
        </script>

        <button type="button" id="button1" onclick="callAndroid()">调用安卓代码</button>
    </body>

</html>

2.创建连接桥

public class AndroidJsBridge {

    private Context mContext;

    public AndroidJsBridge(Context context) {
        mContext = context;
    }

    @JavascriptInterface
    public void hello(String msg) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
    }
}

3.使用，将html文件放到assets资产目录下，使用webview加载本地文件

final WebView web = (WebView) findViewById(R.id.webview);
        WebSettings settings = web.getSettings();

        //设置与js交互的权限
        settings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);

        web.addJavascriptInterface(new AndroidJsBridge(this), "test");
        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        web.loadUrl("file:///android_asset/index.html");

        findViewById(R.id.show_js).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 必须另开线程进行JS方法调用(否则无法调用)
                web.post(new Runnable() {
                    @Override
                    public void run() {
                        web.loadUrl("javascript:callJs()");
                    }
                });
            }
        });

        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体，内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        web.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(WebViewActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
        });
    }