在 Android 开发中，从 WebView 的 H5 页面返回到原生页面，通常需要在 H5 页面中调用 Android 原生代码来实现。这需要结合 WebView 的 addJavascriptInterface 方法和 Android 原生代码进行桥接。
下面是详细的实现步骤：
1. 编写 Android 原生代码
首先，你需要创建一个 Java 或 Kotlin 类，用于提供 H5 页面可以调用的方法。这个类将作为 H5 和原生之间的桥梁。
MyJavaScriptInterface.kt (Kotlin)
class MyJavaScriptInterface(private val activity: Activity) {
@JavascriptInterface
fun goBackToNative() {
activity.runOnUiThread {
activity.finish() // 结束当前的 Activity，回到上一个原生页面
}
}
}
@JavascriptInterface 注解非常重要，它确保该方法可以被 JavaScript 访问。
2. 在 WebView 中设置接口
接下来，在你的 Activity 或 Fragment 中，加载 WebView 并将刚才创建的接口类添加到 WebView 中。
YourActivity.kt (Kotlin)
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
class YourActivity : AppCompatActivity() {
private lateinit var webView: WebView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_your)
webView = findViewById(R.id.webView)
// 配置 WebView
webView.settings.javaScriptEnabled = true
webView.webViewClient = WebViewClient()
// 将原生接口注入到 WebView 中，"AndroidInterface" 是 H5 页面中用于调用的对象名
webView.addJavascriptInterface(MyJavaScriptInterface(this), "AndroidInterface")
// 加载 H5 页面
webView.loadUrl("file:///android_asset/your_h5_page.html")
// 或者 webView.loadUrl("https://your-website.com")
}
}
这里的 "AndroidInterface" 就是 H5 页面中用来调用原生方法的对象名。你可以根据需要自定义这个名称。
3. 在 H5 页面中调用原生方法
最后，在你的 H5 页面中，通过 JavaScript 来调用我们之前定义的 goBackToNative 方法。
your_h5_page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5 页面</title>
</head>
<body>
<h1>欢迎来到 H5 页面</h1>
<p>点击下方按钮返回原生应用</p>
<button onclick="goBack()">返回原生</button>
<script>
function goBack() {
// 检查 AndroidInterface 对象是否存在，以避免在非 Android 环境下报错
if (typeof AndroidInterface !== 'undefined' && AndroidInterface.goBackToNative) {
AndroidInterface.goBackToNative(); // 调用原生方法
} else {
console.log("AndroidInterface 不存在或 goBackToNative 方法不可用");
// 可以在这里添加其他处理，比如关闭当前网页
window.close();
}
}
</script>
</body>
</html>
当用户在 H5 页面中点击 "返回原生" 按钮时，会执行 goBack() JavaScript 函数，然后调用 AndroidInterface.goBackToNative() 方法。这个调用会触发 Android 原生代码中的 activity.finish()，从而关闭当前的 WebView Activity，返回到上一个原生页面。
总结
整个流程可以概括为：
- Android 端：创建一个类，使用
@JavascriptInterface注解暴露原生方法（例如finish()）。 - Android 端：通过
addJavascriptInterface方法将这个类注入到 WebView 中，并指定一个名称（例如AndroidInterface）。 - H5 端：在 JavaScript 中，使用这个指定的名称（
AndroidInterface）来调用原生方法（例如AndroidInterface.goBackToNative()）。
