Android WebView与Javascript交互

最新推荐文章于 2022-08-24 15:08:27 发布

小北的博客

最新推荐文章于 2022-08-24 15:08:27 发布

阅读量321

点赞数

分类专栏： Android 文章标签： android javascript webview

本文链接：https://blog.csdn.net/owenchan1987/article/details/69526463

版权

Android 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

WebView与Javascript交互是双向的数据传递：

（1）H5网页的JS函数调用Native函数
（2）Native函数调用JS函数

1、H5网页实现，主要实现actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下文件名为 hybrid.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    function actionFromNativeWithParam(arg){
         document.getElementById("log_msg").innerHTML +=
             ("<br\>Native调用了js函数参数："+arg);
    }
    </script>
</head>
<body>
<p>WebView与Javascript交互</p>
<div>
    <button onClick="window.js2native.actionFromJsWithParam('come from Js')">调用Native代码</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>

2、Activity 中webview 设置看注释

public class MainActivity extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/hybrid.html");
        mWebView.addJavascriptInterface(new JsInterface(), "js2native");
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });
    }

    final class JsInterface {

        @JavascriptInterface
        public void actionFromJsWithParam(final String str) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(MainActivity.this, "js调用了Native函数：" + str, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

mWebView.addJavascriptInterface(new JsInterface(), “js2native”);相当于添加一个js回调接口，然后给这个起一个别名, @android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的，在4.2以后才有的。
js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如： “window.js2native.actionFromJsWithParam(‘come from Js’)”，这里的js2native就是Native中JsInterface()对象的别名Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl(“javascript:actionFromNative()”);

3、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Native调用js函数"/>

</LinearLayout>

4、Demo 截图

这里写图片描述

小北的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android WebView与Javascript交互

###WebView与Javascript交互是双向的数据传递：（1）H5网页的JS函数调用Native函数（2）Native函数调用JS函数1、H5网页实现，主要实现actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下文件名为 hybrid.html<html><head> <meta http-e
复制链接

扫一扫

专栏目录