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调用之后需要执行的代码