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

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

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

一、三種方式概覽對(duì)比

二、詳細(xì)說明與實(shí)現(xiàn)

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

原理：

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

安全要求：

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

Android 實(shí)現(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 實(shí)現(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)點(diǎn)：簡單直接，廣泛使用
? 缺點(diǎn)：Android 舊版本有安全漏洞；iOS 無法直接返回值（需回調(diào)）

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

原理：

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

這是 Chrome 團(tuán)隊(duì)推薦的 WebView 通信方式，安全性高。

Android 實(shí)現(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 實(shí)現(xiàn)（WKWebView）：

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

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

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

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

原理：

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

Android 實(shí)現(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 實(shí)現(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)點(diǎn)：兼容性極好（所有 WebView 支持）
? 缺點(diǎn)：

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

三、如何選擇？

四、最佳實(shí)踐建議

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

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

最新評(píng)論