Android原生WebView与网页js相互调用

最新推荐文章于 2022-08-20 21:14:39 发布

程序猿、啊啊啊

最新推荐文章于 2022-08-20 21:14:39 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： webview Js Android 互调原生js

本文链接：https://blog.youkuaiyun.com/xiaohao0724/article/details/64129423

Android开发必备专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种在Android应用中使用WebView加载本地HTML文件，并通过JavaScriptInterface实现Android与JavaScript之间的参数传递及方法调用的技术方案。

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

随着手机网络的升级，越来越多的开发者在一些页面使用网页来代替Adroid原生页面。这就需要Android和Js之间相互传递参数相互调用方法。今天就来带大家实现Android与Js的互调。

先来看运行图：

代码MainActivity.java

public class MainActivity extends Activity {

    private WebView webView;
    private EditText editText;

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

        webView = (WebView) findViewById(R.id.webView);
        editText = (EditText) findViewById(R.id.editText);
        initWebView();
    }

    // 初始化WebView

    private void initWebView() {

        // 不跳转到其他浏览器
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        WebSettings settings = webView.getSettings();
        // 设置支持Js
        settings.setJavaScriptEnabled(true);
        // 加载本地html文件
        webView.loadUrl("file:///android_asset/JsMutualAndroid.html");
        webView.addJavascriptInterface(new JSInterface(), "havorld");
    }

    // 按钮的点击事件
    public void click(View view) {

        // javascript:javaCallJs('内容')
        String str = "javascript:androidCallJs(" + "'"+ editText.getText().toString() + "'" + ")";
        // java调用JS方法
        webView.loadUrl(str);
    }


    private class JSInterface {
        // JS需要调用的方法， 在API 17之前有一些漏洞，所以在API 17以后，需要在JavaScript接口类的方法加上@JavascriptInterface注解
        @JavascriptInterface
        public void jsCallAndroid(String str) {

            Toast.makeText(SecondActivity.this, str, Toast.LENGTH_SHORT).show();
        }
    }

}

布局activity_main.xml

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFEA2"
        android:padding="10dp"
        android:text="Android原生"
        android:textSize="16sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFEA2"
        android:orientation="vertical"
        android:padding="10dp" >

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:hint="请输入传入Js的内容"
            android:textSize="16sp" >

            <requestFocus />
        </EditText>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="click"
            android:text="向WebView传入内容"
            android:textSize="16sp" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="#FF80C0"
        android:padding="10dp"
        android:text="WebView"
        android:textSize="16sp" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

在Android的assets目录下放置JsMutualAndroid.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
    function androidCallJs(str) {
        document.getElementById("content").innerHTML = ("您输入了：" + str);
    }
</script>
<style type="text/css">
body {
    background-color: #FF80C0;
    padding: 10px;
    font-size: 16px;
}

#content {
    text-align: center;
}

.btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    padding: 5px 0;
}
</style>
</head>
<body>
    <div id="content"></div>
    <input class="btn" type="button" value="点击Js调用Android"
        onclick="window.havorld.jsCallAndroid('我来自Js调用')" />
</body>
</html>
</html>

OK，这样就可以了，有没有一种so easy的赶脚。