Android WebView与JavaScript的相互调用

最新推荐文章于 2024-05-06 18:20:27 发布

原创最新推荐文章于 2024-05-06 18:20:27 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍如何在Android应用中实现与JavaScript的双向调用。包括Android调用JavaScript的方法及注意事项，以及JavaScript如何调用Android代码，并展示了具体的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Android调用JavaScript

1.1、需要加载的JavaScript代码：

<html>
<head>
<script type="text/javascript">
function callJS()
{
alert("Android调用了JavaScript！!")
}
</script>
</head>
</html>

1.2、在Android里通过WebView设置调用JS代码

public class MainActivity extends AppCompatActivity {

    WebView wv;
    Button button;

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

        wv = findViewById(R.id.wv);
        button = findViewById(R.id.btn);

        initWebview(wv);

        //将html文件放在assets文件下调用
        wv.loadUrl("file:///android_asset/javascript.html");

        button.setOnClickListener(view -> {
            //调用JavaScript的两种方法
            wv.post(() -> {
                //1、如果SDK版本小于18，即Android4.4以下
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
                    //:callJS()前面的字符可随意, ()里面即传入js中的参数，需要字符串拼接
                    wv.loadUrl("javascript:callJS('" + "Android调用了JavaScript！" + "')");
                } else {
                    //2、这个方法只有在Android4.4以上才能使用
                    wv.evaluateJavascript("javascript:callJS('" + "Android调用了JavaScript！" + "')", s -> {
                        //此处为 js 返回的结果
                    });
                }
            });
        });
        //webview只是载体，必须要setWebChromeClient来渲染
        //WebChromeClient可以设置相应js的动作函数(Alert)
        wv.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                //设置响应js的Alert()函数
                return false;
            }
        });
    }

    private void initWebview(WebView wv) {
        WebSettings settings = wv.getSettings();
        // 设置允许JS弹窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 设置与Js交互的权限
        settings.setJavaScriptEnabled(true);
        // 设置缩放支持
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        //不显示webview缩放按钮
        settings.setDisplayZoomControls(false);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //支持http与https内容混合
            //android5.0以前只有MIXED_CONTENT_ALWAYS_ALLOW一种模式，5.0以前setMixedContentMode会报错
            settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

        //ua标识 供H5判断来源
        String android = settings.getUserAgentString() + "RBT_App_UserAgent_Android";
        settings.setUserAgentString(android);
    }
}

成功调用，完成。

2、JavaScript 调用Android

2.1、需要加载的JavaScript代码：

<html>
<head>
<script type="text/javascript">
function callAndroid()
{
    test.hello("js调用了android中的hello方法!");
}
</script>
</head>

<body>
<input type="button" onclick="callAndroid()" value="JavaScript调用Android" />
</body>

</html>

1.2、在JavaScript里通过WebView设置调用Android代码

public class SecondActivity extends AppCompatActivity {

    WebView wv;

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

        wv = findViewById(R.id.wv);

        initWebview(wv);

        // 通过addJavascriptInterface()将Java对象映射到JS对象
        //参数1：Javascript对象名
        //参数2：Java对象名
        wv.addJavascriptInterface(new JsCallAndroid(), "test");//AndroidtoJS类对象映射到js的test对象

        //将html文件放在assets文件下调用
        wv.loadUrl("file:///android_asset/javascript2.html");

    }


    /**
     * 映射供js调用的类
     */
    public class JsCallAndroid {
        /**
         * 被调用是在JavaBridge线程，不能在这个线程调evaluateJavascript
         */
        //必须添加@JavascriptInterface注解
        @JavascriptInterface
        //定义JS将会调用的方法
        public void hello(String msg) {
            Toast.makeText(SecondActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
    }


    private void initWebview(WebView wv) {
        WebSettings settings = wv.getSettings();
        // 设置允许JS弹窗
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 设置与Js交互的权限
        settings.setJavaScriptEnabled(true);
        // 设置缩放支持
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        //不显示webview缩放按钮
        settings.setDisplayZoomControls(false);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //支持http与https内容混合
            //android5.0以前只有MIXED_CONTENT_ALWAYS_ALLOW一种模式，5.0以前setMixedContentMode会报错
            settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

        //ua标识 供H5判断来源
        String android = settings.getUserAgentString() + "RBT_App_UserAgent_Android";
        settings.setUserAgentString(android);
    }
}