Android调用JS方法的实现流程

流程图

flowchart TD
    A[创建WebView对象] --> B[设置WebChromeClient]
    B --> C[设置WebViewClient]
    C --> D[加载URL]
    D --> E[定义JS接口]
    E --> F[调用JS方法]

表格展示步骤

步骤 动作 代码
1 创建WebView对象 WebView webView = new WebView(this);
2 设置WebChromeClient webView.setWebChromeClient(new WebChromeClient());
3 设置WebViewClient webView.setWebViewClient(new WebViewClient());
4 加载URL webView.loadUrl("file:///android_asset/index.html");
5 定义JS接口 webView.addJavascriptInterface(new JsInterface(), "JsInterface");
6 调用JS方法 webView.loadUrl("javascript:jsMethod()");

代码实现

首先,你需要在Android项目中创建一个WebView对象,并设置WebChromeClient和WebViewClient。WebChromeClient用于处理JavaScript的弹出框、网站图标、网站标题等相关事件,而WebViewClient用于处理页面加载、错误、资源加载等事件。

WebView webView = new WebView(this);
webView.setWebChromeClient(new WebChromeClient());
webView.setWebViewClient(new WebViewClient());

然后,你需要加载一个URL到WebView中,这个URL可以是一个本地的HTML文件或者远程的网页。

webView.loadUrl("file:///android_asset/index.html");

接下来,你需要在Android项目中定义一个公开的Java类,用于提供供JavaScript调用的方法。这个类需要使用注解@JavascriptInterface来标记可供JavaScript调用的方法。

public class JsInterface {
    @JavascriptInterface
    public void jsMethod() {
        // 这里是JavaScript调用之后需要执行的代码
    }
}

最后,你可以在Android代码中通过webView.loadUrl("javascript:jsMethod()")来调用在JavaScript中定义的方法。这会触发WebView加载一个JavaScript脚本,从而实现与JavaScript的交互。

webView.loadUrl("javascript:jsMethod()");

需要注意的是,在Android 4.2及以上的版本中,为了提高安全性,WebView默认禁止了JavaScript的访问。你需要在AndroidManifest.xml文件中添加以下代码,以允许JavaScript的访问。

<uses-permission android:name="android.permission.INTERNET" />

另外,在Android 4.2及以上的版本中,你还需要在WebView对象上调用webView.getSettings().setJavaScriptEnabled(true)来启用JavaScript功能。

完整的代码示例:

import android.Manifest;
import android.annotation.SuppressLint;
import android.content.pm.PackageManager;
import android.os.Build;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;

public class MainActivity extends AppCompatActivity {

    private static final int REQUEST_PERMISSION = 1;

    private WebView webView;

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

        webView = findViewById(R.id.web_view);

        // 检查并请求权限
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (ActivityCompat.checkSelfPermission(this, Manifest.permission.INTERNET) != PackageManager.PERMISSION_GRANTED) {
                ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.INTERNET}, REQUEST_PERMISSION);
            } else {
                setupWebView();
            }
        } else {
            setupWebView();
        }
    }

    private void setupWebView() {
        // 设置WebChromeClient和WebViewClient
        webView.setWebChromeClient(new WebChromeClient());
        webView.setWebViewClient(new WebViewClient());

        // 加载URL
        webView.loadUrl("file:///android_asset/index.html");

        // 启用JavaScript
        webView.getSettings().setJavaScriptEnabled(true);

        // 添加JavaScript接口
        webView.addJavascriptInterface(new JsInterface(), "JsInterface");
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        if (requestCode == REQUEST_PERMISSION) {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                setupWebView();
            }
        }
    }

    public class JsInterface {
        @JavascriptInterface
        public void jsMethod() {
            // 这里是JavaScript调用之后需要执行的代码