在 Android 开发中,我们通常使用 WebView 组件来加载和显示 HTML5 页面。要实现 Android 与 HTML5 的交互,我们需要使用 WebView 提供的 JavaScript 接口。
以下是 Android 与 HTML5 交互的常用方法及示例:
1: Android 调用 HTML5 中的 JavaScript 函数:
在 WebView 中设置 JavaScriptEnabled
为 true
,然后使用 loadUrl()
方法调用 HTML5 中的 JavaScript 函数。
WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
// 加载 HTML5 页面
webView.loadUrl("file:///android_asset/sample.html");
// 调用 HTML5 中的 JavaScript 函数
webView.loadUrl("javascript:alert('Hello from Android')");
2: HTML5 调用 Android 中的方法:
创建一个与 JavaScript 交互的类,并使用 @JavascriptInterface
注解为 HTML5 提供 Android 方法。
示例:
public class WebAppInterface {
Context context;
WebAppInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
}
在 WebView 中添加 JavaScript 接口,并设置接口名称:
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
在 HTML5 页面中调用 Android 方法:
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML</title>
<script type="text/javascript">
function callAndroidFunction() {
Android.showToast("Hello from HTML5");
}
</script>
</head>
<body>
<button onclick="callAndroidFunction()">Call Android Function</button>
</body>
</html>
3: Android 与 HTML5 双向交互:
在 HTML5 页面中添加一个按钮,点击按钮时调用 Android 方法,并在 Android 方法中调用 HTML5 中的 JavaScript 函数。
示例:
HTML5 页面(sample.html):
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML</title>
<script type="text/javascript">
function showMessage(message) {
alert(message);
}
</script>
</head>
<body>
<button onclick="Android.callJavaScriptFunction()">Call JavaScript Function</button>
</body>
</html>
Android 代码:
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.loadUrl("file:///android_asset/sample.html");
}
public class WebAppInterface {
Context context;
WebAppInterface(Context context) {
this.context = context;
}
@JavascriptInterface
public void callJavaScriptFunction() {
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showMessage('Hello from Android')");
}
});
}
}
}