在混合開發(fā)（Hybrid App）中，Web 與 Native（Android/iOS）之間的通信是核心需求。常見的三種通信方式是：

1. JSBridge（基于 addJavascriptInterface / WKScriptMessageHandler）
2. postMessage + MessageChannel（現(xiàn)代 WebView 通信）
3. URL Scheme（攔截自定義協(xié)議）

下面從 原理、區(qū)別、安全性、平臺實現(xiàn) 等維度詳細對比，并給出 Android 和 iOS 的實現(xiàn)方式。

一、三種方式概覽對比

二、詳細說明與實現(xiàn)

1. JSBridge（傳統(tǒng)橋接）

原理：

• Android：通過 WebView.addJavascriptInterface() 注入 Java 對象。
• iOS：通過 WKWebView.configuration.userContentController.add(_:name:) 注冊消息處理器。

安全要求：

• Android 必須加 @JavascriptInterface
• iOS 需驗證來源（如域名白名單）

Android 實現(xiàn)：

java
編輯
1// Java
2public class Bridge {
3    @JavascriptInterface
4    public void callNative(String data) {
5        // 處理 JS 調(diào)用
6    }
7}
8webView.addJavascriptInterface(new Bridge(), "Android");

javascript
編輯
1// JS
2Android.callNative("hello");

iOS 實現(xiàn)（Swift）：

swift
編輯
1// Swift
2class BridgeHandler: NSObject, WKScriptMessageHandler {
3    func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) {
4        if message.name == "iosBridge" {
5            print("收到 JS 消息:", message.body)
6        }
7    }
8}
9
10let config = WKWebViewConfiguration()
11config.userContentController.add(BridgeHandler(), name: "iosBridge")
12let webView = WKWebView(frame: .zero, configuration: config)

javascript
編輯
1// JS
2window.webkit.messageHandlers.iosBridge.postMessage("hello");

? 優(yōu)點：簡單直接，廣泛使用
? 缺點：Android 舊版本有安全漏洞；iOS 無法直接返回值（需回調(diào)）

2.postMessage+MessageChannel（現(xiàn)代通信）

原理：

利用 HTML5 的 MessageChannel 創(chuàng)建一個雙向、異步、隔離的消息通道，Native 作為另一端接收端口。

這是 Chrome 團隊推薦的 WebView 通信方式，安全性高。

Android 實現(xiàn)（API ≥ 23）：

java
編輯
1webView.evaluateJavascript("(function() {" +
2    "const channel = new MessageChannel();" +
3    "channel.port1.onmessage = function(e) { console.log('Reply:', e.data); };" +
4    "window.nativePort = channel.port2;" +
5    "})()", null);
6
7// Native 發(fā)送消息到 JS
8webView.postWebMessage(
9    new WebMessageCompat("Hello from Android", new WebMessagePortCompat[]{port}),
10    Uri.parse("https://your-trusted-domain.com")
11);

注意：需配合 WebMessageListener（AndroidX）或 postWebMessage 使用。

iOS 實現(xiàn)（WKWebView）：

iOS 的 WKScriptMessageHandler 本身不直接支持 MessageChannel，但可通過 JS 端模擬雙向通信，或使用 evaluateJavaScript 返回結(jié)果。

目前 Android 對 MessageChannel 原生支持更好，iOS 仍以 messageHandlers 為主。

? 優(yōu)點：安全、標準、支持流式通信
? 缺點：兼容性較差（Android < 6.0 不支持）

3. URL Scheme（攔截跳轉(zhuǎn)）

原理：

JS 通過 location.href = "myapp://action?param=xxx" 觸發(fā)頁面跳轉(zhuǎn)，Native 攔截該 URL 并解析。

Android 實現(xiàn)：

java
編輯
1webView.setWebViewClient(new WebViewClient() {
2    @Override
3    public boolean shouldOverrideUrlLoading(WebView view, String url) {
4        if (url.startsWith("myapp://")) {
5            // 解析參數(shù)并處理
6            return true; // 攔截，不加載
7        }
8        return false;
9    }
10});

iOS 實現(xiàn)：

swift
編輯
1func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
2    if let url = navigationAction.request.url,
3       url.scheme == "myapp" {
4        // 處理自定義協(xié)議
5        decisionHandler(.cancel) // 攔截
6        return
7    }
8    decisionHandler(.allow)
9}

技巧：避免頁面跳轉(zhuǎn)閃爍

• 使用隱藏的 <iframe> 觸發(fā)：

  javascript
  編輯
  1const iframe = document.createElement('iframe');
  2iframe.src = 'myapp://call?data=xxx';
  3iframe.style.display = 'none';
  4document.body.appendChild(iframe);
  5setTimeout(() => document.body.removeChild(iframe), 100);
  

? 優(yōu)點：兼容性極好（所有 WebView 支持）
? 缺點：

• 無法直接返回值（需 JS 再調(diào)一次）
• URL 長度有限（~2000 字符）
• 安全性差（可能被第三方頁面?zhèn)卧煺{(diào)用）

三、如何選擇？

四、最佳實踐建議

1. 永遠啟用 HTTPS，防止中間人注入惡意 JS。
2. 驗證 WebView 加載的域名（白名單），避免第三方頁面調(diào)用你的 Native 接口。
3. 不要在 JSBridge 中暴露敏感操作（如讀取文件、獲取 token）。
4. 對 URL Scheme 參數(shù)做簽名或加密，防止偽造。
5. 優(yōu)先使用 WKWebView（iOS）和 AndroidX WebView（Android） ，避免使用過時的 UIWebView 或系統(tǒng) WebView。

到此這篇關(guān)于jsbridge、postMessage、scheme三種通信方式的區(qū)別以及安卓ios實現(xiàn)方式的文章就介紹到這了,更多相關(guān)jsbridge、postMessage、scheme通信方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論