Android 嵌入 Html
Android 嵌入 Html
在 Android 应用中嵌入 HTML 内容通常使用 WebView 组件来实现。WebView 是一种允许你在应用中显示网页内容的视图。
准备html文件
<!-- //将html文件放入与java、res同级目录assets目录下 -->
<!-- src/main/assets/assets.html -->
<html>
<head>
<title>My HTML Page</title>
<script type="text/javascript">
function callAndroidFunction() {
// 调用 Android.showToast 方法，这个方法由 Android 端提供，用于显示 Toast 消息。
Android.showToast("hello，this is from JavaScript");
}
function myJavaScriptFunction() {
// 这里是JavaScript函数的实现
alert("Hello from JavaScript function!");
return "This is the data returned by javasrcipt."
}
</script>
</head>
<body>
<h1>Hello, WebView</h1>
<p>这是一个html界面</p>
<form>
<table>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</table>
</form>
<button onclick="callAndroidFunction()">提示</button>
</body>
</html>
添加 WebView 到布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:text="确定"
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<WebView
android:layout_below="@id/btn"
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
在活动（Activity）中配置 WebView
public class MainActivity extends AppCompatActivity {
private WebView webView;
@SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface"})
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
// 启用 JavaScript 支持，使得 WebView 可以执行 HTML 中的 JavaScript 代码。
webView.setWebViewClient(new WebViewClient());
//这是一个用于处理 WebView 中的网页加载过程的客户端
webView.setWebChromeClient(new WebChromeClient());
//这是一个用于处理与网页渲染相关的客户端
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
// 将WebAppInterface对象添加到WebView中，并将其暴露给JavaScript代码，名称为"Android"。这样JavaScript可以调用WebAppInterface中的方法。
webView.loadUrl("file:///android_asset/sample.html");
//加载指定的 URL 到 WebView 中
Button btn=findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 执行 JavaScript 函数 myJavaScriptFunction 并获取其返回值。
webView.evaluateJavascript("javascript:myJavaScriptFunction()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 处理 JavaScript 代码执行的结果
System.out.println(value);
Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
}
});
loadJavaScriptToGetTableData();
}
});
}
// 加载JavaScript代码以获取表格数据
private void loadJavaScriptToGetTableData() {
webView.evaluateJavascript(
"(function() {" +
" var tableData = [];" +
" var table = document.getElementsByTagName('table')[0];" +
" var rows = table.getElementsByTagName('tr');" +
" for (var i = 0; i < rows.length; i++) {" +
" var cells = rows[i].getElementsByTagName('td');" +
" var rowData = [];" +
" for (var j = 0; j < cells.length; j++) {" +
" var input = cells[j].getElementsByTagName('input')[0];" +
" rowData.push(input.value);" + // 使用 input.value 获取输入框的值
" }" +
" tableData.push(rowData);" +
" }" +
" return JSON.stringify(tableData);" +
"})()",
new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 在这里处理JavaScript代码返回的表格数据
String tableDataJson = value;
Toast.makeText(MainActivity.this, "Table Data: " + tableDataJson, Toast.LENGTH_SHORT).show();
System.out.println(tableDataJson);
}
}
);
}
//WebAppInterface: 内部类，用于实现 Java 和 JavaScript 之间的交互。
public class WebAppInterface {
private MainActivity mContext;
WebAppInterface(MainActivity c) {
mContext = c;
}
//showToast 方法可以从 JavaScript 被调用，用于显示 Toast 消息。
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
}
}
@Override
//在活动注销时注销webview防止内存泄露
protected void onDestroy() {
super.onDestroy();
webView.destroy();
}
}
总结
Android WebView控件是Android开发中用于展示网页内容的一个非常强大的组件。它允许开发者在自己的应用中嵌入一个完整的浏览器环境，用于加载和显示网页。使用WebView，开发者可以为用户提供丰富的网络内容体验，同时保持应用的原生外观和感觉。以下是对Android WebView控件使用的一个总结：
.基本使用
-
添加WebView到布局文件：首先，需要在XML布局文件中添加WebView控件。
-
在Activity中配置WebView：在Activity的onCreate方法中，通过findViewById获取WebView实例，并配置其属性，如启用JavaScript支持、设置WebViewClient和WebChromeClient等。
. 常用的WebViewClient和WebChromeClient
-
WebViewClient：用于处理各种通知和请求事件，如页面开始加载、页面加载完成、页面加载失败等。
-
WebChromeClient：用于处理与渲染相关的回调，如进度条更新、JS弹窗等。
注意事项
- 内存泄漏：WebView可能会导致内存泄漏，特别是在Activity被销毁时，如果WebView还持有Activity的引用。因此，在Activity的onDestroy方法中，应该调用
webView.destroy()来释放WebView占用的资源。 - 硬件加速：从Android 3.0（API级别 11）开始，WebView默认启用硬件加速。但在某些情况下，如果WebView表现异常（如渲染问题），可以尝试关闭硬件加速。
- 安全性：加载不受信任的网页时，需要注意安全性问题，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。确保服务器端的防护措施完善，并避免在WebView中加载敏感信息。
- 性能优化：对于复杂的网页或应用，WebView的性能可能会受到影响。可以通过优化网页的加载内容、减少DOM操作、缓存策略等方式来提升性能。
高级功能
- 与JavaScript交互：WebView支持Java与JavaScript之间的交互，可以通过
addJavascriptInterface方法实现。 - 下载文件：通过重写
shouldOverrideUrlLoading方法处理下载链接，使用DownloadManager或其他下载方式。 - 加载本地HTML：使用
loadData或loadDataWithBaseURL方法加载本地HTML字符串。
WebView控件为Android应用提供了强大的网页内容展示能力，但也需要开发者注意其使用细节和潜在问题，以确保应用的稳定性和安全性。
浙公网安备 33010602011771号