JavaScript 呼叫 Android/iOS 原生方法並回傳資料完整方案

核心架構：JSBridge 雙向通訊

WebView 載入 H5 頁面，JS 透過橋接層呼叫原生功能，原生執行完成後回呼 JS。需分別處理 Android 與 iOS 平台差異。

Android 實作方案

1. 原生端註冊介面

public class JsBridge {
    @JavascriptInterface
    public String getParams(String param) {
        // 業務邏輯處理
        return "Android 回傳: " + param;
    }
    
    @JavascriptInterface
    public void nativeAction(String funcName, String jsonParam) {
        // 異步處理，完成後呼叫 JS 回呼
        new Handler(Looper.getMainLooper()).post(() -> {
            String result = doBusiness(funcName, jsonParam);
            webView.evaluateJavascript(
                "javascript:window.JSBridgeCallback('" + funcName + "', '" + escape(result) + "')", 
                null
            );
        });
    }
}

// WebView 設定
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsBridge(), "AndroidBridge");

2. JS 端統一呼叫封裝

window.JSBridge = {
    callNative: function(funcName, param, callback) {
        // 產生唯一回呼 ID
        const callbackId = 'cb_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
        
        // 儲存回呼函式
        window.JSBridge._callbacks = window.JSBridge._callbacks || {};
        window.JSBridge._callbacks[callbackId] = callback;
        
        // 呼叫原生
        if (window.AndroidBridge) {
            // Android: 同步回傳或異步回呼
            try {
                const result = window.AndroidBridge.nativeAction(funcName, JSON.stringify(param));
                if (result && callback) callback(JSON.parse(result));
            } catch (e) {
                console.error('Android bridge error:', e);
            }
        } else if (window.webkit && window.webkit.messageHandlers) {
            // iOS WKWebView
            window.webkit.messageHandlers.iOSBridge.postMessage({
                func: funcName,
                param: param,
                callbackId: callbackId
            });
        }
    },
    
    // 原生端呼叫此方法回傳結果
    _handleCallback: function(callbackId, result) {
        const callback = window.JSBridge._callbacks?.[callbackId];
        if (callback) {
            callback(result);
            delete window.JSBridge._callbacks[callbackId];
        }
    }
};

iOS 實作方案

1. WKWebView 設定 (iOS 8+)

// Swift
let config = WKWebViewConfiguration()
let userContentController = WKUserContentController()
userContentController.add(self, name: "iOSBridge")
config.userContentController = userContentController

let webView = WKWebView(frame: .zero, configuration: config)
webView.navigationDelegate = self

2. 實作 WKScriptMessageHandler

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, 
                               didReceive message: WKScriptMessage) {
        guard message.name == "iOSBridge",
              let body = message.body as? [String: Any],
              let funcName = body["func"] as? String,
              let callbackId = body["callbackId"] as? String else { return }
        
        let param = body["param"]
        
        // 異步處理業務
        DispatchQueue.global().async {
            let result = self.handleNativeFunction(funcName, param: param)
            
            // 主執行緒回呼 JS
            DispatchQueue.main.async {
                let js = "window.JSBridge._handleCallback('\(callbackId)', \(result.toJSON()));"
                self.webView.evaluateJavaScript(js, completionHandler: nil)
            }
        }
    }
}

3. JS 呼叫 iOS 範例

// JS 端統一介面自動判斷平台
JSBridge.callNative('getUserInfo', { userId: 123 }, (result) => {
    console.log('用戶資訊:', result);
    updateUI(result);
});

進階：統一 JSBridge 庫推薦

• WebViewJavascriptBridge (OC/Swift/JS)：成熟雙向通訊庫
• DSBridge (Android/iOS/JS)：支援 Promise、同步/異步、型別安全
• React Native / Flutter WebView：跨平台框架內建橋接機制

安全性與最佳實踐

完整流程圖解

JS 呼叫 JSBridge.callNative()
    ↓
平台判斷
    ├── Android: window.AndroidBridge.nativeAction()
    │              ↓
    │         原生處理 → webView.evaluateJavascript() → window.JSBridge._handleCallback()
    │
    └── iOS:   window.webkit.messageHandlers.iOSBridge.postMessage()
                  ↓
             WKScriptMessageHandler → 原生處理 → webView.evaluateJavaScript() → window.JSBridge._handleCallback()
    ↓
JS 回呼函式執行，更新 UI