Android WebView使用方法详解 附js交互调用方法
一、Android WebView使用方法
WebView是Android提供的一个用于展示网页的组件。它支持HTML、CSS和JavaScript等Web标准，并可以与原生代码进行交互。
1.1 在XML布局文件中使用WebView
在布局文件中添加一个WebView控件：
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
1.2 在Java代码中操作WebView
首先找到WebView控件：
WebView webView = (WebView) findViewById(R.id.webview);
然后加载网页：
webView.loadUrl("https://www.baidu.com");
也可以加载本地的html文件：
webView.loadUrl("file:///android_asset/test.html");
1.3 WebView设置
可以对WebView控件进行一些设置，例如启用JavaScript、启用缩放等：
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 启用JavaScript
settings.setSupportZoom(true); // 启用缩放
1.4 WebView的生命周期
在Activity的生命周期方法中调用WebView控件对应的生命周期方法，例如onResume、onPause、onDestroy等：
@Override
protected void onResume() {
super.onResume();
webView.onResume();
}
@Override
protected void onPause() {
super.onPause();
webView.onPause();
}
@Override
protected void onDestroy() {
super.onDestroy();
webView.destroy();
}
二、WebView与JavaScript交互
WebView支持与JavaScript进行交互，可以通过JavaScript调用Android原生函数，也可以从原生代码中调用JavaScript函数。
2.1 从JavaScript调用Android原生函数
从JavaScript调用Android函数的过程如下：
1. 在Java代码中添加一个与JavaScript交互的接口：
class JsInterface {
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}
}
其中，JavascriptInterface注解表示该函数可以被JavaScript调用。
- 将接口实例注入到WebView中：
webView.addJavascriptInterface(new JsInterface(), "Android");
其中，第一个参数是接口实例，第二个参数是接口名称，JavaScript通过该名称来调用接口方法。
- 在JavaScript中调用Android函数：
Android.showToast('Hello World!');
2.2 从原生代码调用JavaScript函数
从原生代码调用JavaScript函数的过程如下：
1. 在Java代码中使用WebView控件的loadUrl方法调用JavaScript函数：
webView.loadUrl("javascript:showToast('Hello World!')");
- 在JavaScript中定义相应的函数：
function showToast(message) {
alert(message);
}
三、示例说明
下面给出两个示例说明。
3.1 示例一：通过JavaScript获取WebView的高度和宽度
Java代码：
class JsInterface {
@JavascriptInterface
public void getHeightAndWidth(int height, int width) {
Log.d(TAG, "WebView height: " + height);
Log.d(TAG, "WebView width: " + width);
}
}
webView.addJavascriptInterface(new JsInterface(), "Android");
JavaScript代码：
function getHeightAndWidth() {
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Android.getHeightAndWidth(height, width);
}
在调用WebView的loadUrl方法加载这段JavaScript代码后，Android可以通过接口获取WebView的高度和宽度信息。
3.2 示例二：Android调用JavaScript修改网页内容
Java代码：
webView.loadUrl("file:///android_asset/test.html");
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:document.getElementById('content').innerHTML='Hello Android!'");
}
});
JavaScript代码：
<body>
<div id="content">原始内容</div>
</body>
在示例二中，Android在WebView的onPageFinished回调中调用JavaScript代码修改了网页内容。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Android WebView使用方法详解 附js交互调用方法 - Python技术站
微信扫一扫 
支付宝扫一扫 