Android 网页和本地交互 JavascriptInterface

最新推荐文章于 2024-07-24 11:23:56 发布

Android研发曹新雨

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量757

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/u013270444/article/details/115199323

版权

Android 专栏收录该内容

506 篇文章 9 订阅

订阅专栏

Android 端：

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_web_view, container, false);
        mWebView = view.findViewById(R.id.webView);
        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.addJavascriptInterface(new JSInterface(),"yuge");
        //调用js 函数
        view.findViewById(R.id.js1).setOnClickListener(v -> {mWebView.loadUrl("javascript:javacalljs()");});
        String data = "test2222";
        view.findViewById(R.id.js2).setOnClickListener(v -> {mWebView.loadUrl("javascript:javacalljswith('" + data + "')");});
        return view;
    }

    static class JSInterface{
        @JavascriptInterface
        public void jsCallAndroid(){
            Log.d(TAG,"jsCallAndroid");

        }

        @JavascriptInterface
        public void jsCallAndroidArgs(String str1,String str2){
            Log.d(TAG,"jsCallAndroidWithArgs " +str1 + "_"+str2);
        }
    }

html 调用 android，android 端需要对WebView 做一些设置。
关键的代码就是

        settings.setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new JSInterface(),"yuge");

启用增加一个Js 接口，比如我这里添加了一个接口，名字叫yuge。

网页：

<html>
<head>
    <meta http-equiv="Content-Type" charset="utf-8"/>

    <script type="text/javascript">
            function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

            function javacalljswith(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }

        </script>

</head>

<body>
<h3>Web模块</h3>

<h3 id="showmsg">调用js显示结果</h3>

<input type="button" value="Js调用Java代码" onclick="window.yuge.jsCallAndroid()"/>

<input type="button" value="Js调用Java代码并传参数" onclick="window.yuge.jsCallAndroidArgs('1','2')"/>
</body>
</html>

网页端就可以直接调用window.yuge.jsCallAndroidArgs 就可以调用到Android 的代码。