简单的WebView与JS交互

最新推荐文章于 2025-06-08 09:05:14 发布

原创最新推荐文章于 2025-06-08 09:05:14 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #JS交互

基础专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种HTML5页面与Android应用之间的交互方法，通过WebView实现JS调用Android本地方法及Android调用JS函数的过程。展示了如何在HTML中设置按钮触发Android功能，并在Android端响应JS请求。

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

一、首先建立一个html文件，例如：

<html>
<head>
    <meta charset="utf-8">
    <title>Carson_Ho</title>
    <script>
   function callJS(){
      var test = document.getElementById("test");
   alert(test.value)
   }
   function callAndroid(){
       // 由于对象映射，所以调用test对象等于调用Android映射的对象
      test.hello("js调用了android中的hello方法");
   }
</script>
</head>

<body>
<input id="test" type="text" value="HTML5" />
<div id="btn">查看input的值</div>
    <button type="button" style="width:200px;height:200px" id="button1"  onclick="callAndroid()"></button>
</body>

</html>

二、Activity

private WebView webView;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webview);
        button = findViewById(R.id.btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:callJS()");
            }
        });
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        webView.loadUrl("file:///android_asset/javascript.html");
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });
    }

三、xml

 <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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