webview通信（webview console）

## WebView 通信### 简介WebView 是 Android 和 iOS 平台上用于在原生应用中嵌入网页内容的重要组件。然而，仅仅展示网页是不够的，我们经常需要在原生代码和网页之间进行双向通信，以便实现更丰富的功能和交互体验。本文将详细介绍 WebView 通信的常用方法和技术细节。### Android 平台#### 1. JavaScript 调用 Java

通过 WebViewClient.shouldOverrideUrlLoading() 拦截 URL Schema

这是 Android 平台上较为传统的一种通信方式。Web 端通过加载特定格式的 URL，例如 `myapp://action?param1=value1`，原生代码在 `shouldOverrideUrlLoading()` 方法中拦截该 URL，解析参数并执行相应操作。```javawebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (url.startsWith("myapp://")) {// 解析 URL，执行相应操作return true;}return false;}});```

使用 JavaScriptInterface 注解

Android 4.2 (API 17) 引入了 `@JavascriptInterface` 注解，使得 Java 对象的方法可以直接暴露给 JavaScript 调用。这种方式更为直接和安全。```javaclass JsBridge {@JavascriptInterfacepublic void callNativeMethod(String message) {// 处理 JavaScript 的调用}}webView.addJavascriptInterface(new JsBridge(), "AndroidBridge");```JavaScript 端可以直接调用 `AndroidBridge.callNativeMethod()` 方法。#### 2. Java 调用 JavaScript

使用 loadUrl() 方法执行 JavaScript 代码

```javawebView.loadUrl("javascript:alert('Hello from Java!')");```

使用 evaluateJavascript() 方法执行 JavaScript 代码 (API 19+)

`evaluateJavascript()` 方法在 Android 4.4 (API 19) 引入，它允许异步执行 JavaScript 代码并获取返回值。```javawebView.evaluateJavascript("getWebData()", new ValueCallback() {@Overridepublic void onReceiveValue(String value) {// 处理 JavaScript 返回值}});```### iOS 平台#### 1. JavaScript 调用 Objective-C/Swift

使用 WKScriptMessageHandler 协议

iOS 8.0 引入了 `WKWebView` 和 `WKScriptMessageHandler` 协议，提供了一种更安全、更高效的通信方式。```swiftclass WebViewController: UIViewController, WKScriptMessageHandler {override func viewDidLoad() {super.viewDidLoad()let config = WKWebViewConfiguration()config.userContentController.add(self, name: "NativeBridge")let webView = WKWebView(frame: view.bounds, configuration: config)view.addSubview(webView)}func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == "NativeBridge" {// 处理 JavaScript 的调用}}}```JavaScript 端可以通过 `window.webkit.messageHandlers.NativeBridge.postMessage()` 发送消息。

拦截自定义 URL Schema (不推荐)

与 Android 类似，iOS 也可通过拦截自定义 URL Schema 实现 JavaScript 调用原生代码，但这并不是官方推荐的方式，因为它存在潜在的安全风险。#### 2. Objective-C/Swift 调用 JavaScript

使用 evaluateJavaScript(_:completionHandler:) 方法

```swiftwebView.evaluateJavaScript("alert('Hello from Swift!')") { (result, error) in// 处理回调}```### 安全性在进行 WebView 通信时，需要注意安全性问题。

验证数据来源

: 确保只处理来自可信域名的消息。

避免使用 eval()

: 使用 `evaluateJavascript()` 或 `evaluateJavaScript(_:completionHandler:)` 等安全方法执行 JavaScript 代码。

数据校验

: 对接收到的数据进行严格校验，防止注入攻击。### 总结WebView 通信是构建混合应用的关键技术。Android 和 iOS 平台都提供了多种通信方法，开发者需要根据具体需求选择合适的方案，并注意安全问题，以构建安全、可靠的混合应用。

WebView 通信

简介WebView 是 Android 和 iOS 平台上用于在原生应用中嵌入网页内容的重要组件。然而，仅仅展示网页是不够的，我们经常需要在原生代码和网页之间进行双向通信，以便实现更丰富的功能和交互体验。本文将详细介绍 WebView 通信的常用方法和技术细节。

Android 平台

1. JavaScript 调用 Java* **通过 WebViewClient.shouldOverrideUrlLoading() 拦截 URL Schema** 这是 Android 平台上较为传统的一种通信方式。Web 端通过加载特定格式的 URL，例如 `myapp://action?param1=value1`，原生代码在 `shouldOverrideUrlLoading()` 方法中拦截该 URL，解析参数并执行相应操作。```javawebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (url.startsWith("myapp://")) {// 解析 URL，执行相应操作return true;}return false;}});```* **使用 JavaScriptInterface 注解**Android 4.2 (API 17) 引入了 `@JavascriptInterface` 注解，使得 Java 对象的方法可以直接暴露给 JavaScript 调用。这种方式更为直接和安全。```javaclass JsBridge {@JavascriptInterfacepublic void callNativeMethod(String message) {// 处理 JavaScript 的调用}}webView.addJavascriptInterface(new JsBridge(), "AndroidBridge");```JavaScript 端可以直接调用 `AndroidBridge.callNativeMethod()` 方法。

2. Java 调用 JavaScript* **使用 loadUrl() 方法执行 JavaScript 代码**```javawebView.loadUrl("javascript:alert('Hello from Java!')");```* **使用 evaluateJavascript() 方法执行 JavaScript 代码 (API 19+)**`evaluateJavascript()` 方法在 Android 4.4 (API 19) 引入，它允许异步执行 JavaScript 代码并获取返回值。```javawebView.evaluateJavascript("getWebData()", new ValueCallback() {@Overridepublic void onReceiveValue(String value) {// 处理 JavaScript 返回值}});```

iOS 平台

1. JavaScript 调用 Objective-C/Swift* **使用 WKScriptMessageHandler 协议**iOS 8.0 引入了 `WKWebView` 和 `WKScriptMessageHandler` 协议，提供了一种更安全、更高效的通信方式。```swiftclass WebViewController: UIViewController, WKScriptMessageHandler {override func viewDidLoad() {super.viewDidLoad()let config = WKWebViewConfiguration()config.userContentController.add(self, name: "NativeBridge")let webView = WKWebView(frame: view.bounds, configuration: config)view.addSubview(webView)}func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == "NativeBridge" {// 处理 JavaScript 的调用}}}```JavaScript 端可以通过 `window.webkit.messageHandlers.NativeBridge.postMessage()` 发送消息。* **拦截自定义 URL Schema (不推荐)**与 Android 类似，iOS 也可通过拦截自定义 URL Schema 实现 JavaScript 调用原生代码，但这并不是官方推荐的方式，因为它存在潜在的安全风险。

2. Objective-C/Swift 调用 JavaScript* **使用 evaluateJavaScript(_:completionHandler:) 方法**```swiftwebView.evaluateJavaScript("alert('Hello from Swift!')") { (result, error) in// 处理回调}```

安全性在进行 WebView 通信时，需要注意安全性问题。* **验证数据来源**: 确保只处理来自可信域名的消息。 * **避免使用 eval()**: 使用 `evaluateJavascript()` 或 `evaluateJavaScript(_:completionHandler:)` 等安全方法执行 JavaScript 代码。 * **数据校验**: 对接收到的数据进行严格校验，防止注入攻击。

总结WebView 通信是构建混合应用的关键技术。Android 和 iOS 平台都提供了多种通信方法，开发者需要根据具体需求选择合适的方案，并注意安全问题，以构建安全、可靠的混合应用。