javascript与Android简单交互_javascript:window.android.jsandroid("ok")-优快云博客

本文链接：https://blog.youkuaiyun.com/Fearain/article/details/52649259

本文展示了如何实现JavaScript与Android应用的简单交互。通过在WebView中加载HTML，利用JavaScriptInterface注解创建Java类，并通过WebChromeClient处理JavaScript的alert，实现了从JavaScript调用Android方法更新TextView内容，以及Android调用JavaScript函数改变网页元素的功能。

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

html代码：

<html>
    <head>
         <script language="JavaScript">
            function callJS(s) {
                document.getElementById('replace').innerHTML = s;
            }

        </script>
	</head>

	<body>
		<h1 class="h1">WebView</h1>
		<p>
            <a href="#" onclick="window.alert('Alert from JavaScript')">
                Display JavaScript Alert
            </a> <!--该事件会被android截获-->
        </p>
        <p>
            <a href="#" onclick="window.android.callAndroid('js call android')">
                change the textView
            </a>  <!--“android”为addJavascriptInterface()中自己定义的名称，javascript通过“android"来调用java类中callAndroid()方法-->
        </p>
        <p id="replace">
        </p>
	</body>
</html>

java代码：

package com.example.hasee.addweb1;

import android.annotation.SuppressLint;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;

import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends AppCompatActivity {

    private final Handler handler = new Handler();
    private WebView webView;
    private TextView textView;
    private Button button;

    private class AndroidBridge { //由这个类提供各种javaScript可调用的方法。
        @JavascriptInterface  //提供给javascript调用的方法前一定要加这个
        public void callAndroid(final String str) {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    Log.e("callAndroid", str);
                    textView.setText(str);  //javascript调用该方法后将activity_main的textView的text更改为str
                }
            });
        }
    }

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

        webView = (WebView) findViewById(R.id.webView);
        textView = (TextView) findViewById(R.id.textView);
        button = (Button) findViewById(R.id.button);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new AndroidBridge(), "android"); //设置接口名为android，由javascript使用

        webView.setWebChromeClient(new WebChromeClient(){
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show(); //用toast代替alert
                result.confirm();
                return true;
            }
        }); //设置可以被java截获的js事件。

        webView.loadUrl("file:///android_asset/index.html");
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webView.loadUrl("javascript:callJS('you clicked the button')"); //java调用javascript里的函数callJS()
            }
        });
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hasee.addweb1.MainActivity">

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

    <TextView
        android:layout_below="@id/button"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <WebView
        android:layout_below="@id/textView"
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </WebView>
</RelativeLayout>