WebView 与原生通信

方式一:拦截 URL Scheme

实现方式

H5 端

// 发起请求
function callNative(action, params) {
  const query = Object.keys(params || {})
    .map(key => `${key}=${encodeURIComponent(params[key])}`)
    .join('&');
  
  const url = `myapp://bridge?action=${action}${query ? '&' + query : ''}`;
  
  // 方式1:location 跳转
  window.location.href = url;
  
  // 方式2:iframe(部分场景更稳定)
  const iframe = document.createElement('iframe');
  iframe.src = url;
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  setTimeout(() => document.body.removeChild(iframe), 100);
}

// 调用示例
callNative('getUserInfo');
callNative('openPage', { url: '/detail', id: '123' });

iOS 端(WKWebView)

func webView(_ webView: WKWebView, 
             decidePolicyFor navigationAction: WKNavigationAction,
             decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    
    guard let url = navigationAction.request.url else {
        decisionHandler(.allow)
        return
    }
    
    if url.scheme == "myapp" {
        // 解析 URL,执行对应操作
        let action = url.host // "bridge"
        let query = url.query // "action=getUserInfo"
        handleAction(action, params: parseQuery(query))
        decisionHandler(.cancel)
        return
    }
    
    decisionHandler(.allow)
}

Android 端

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("myapp://")) {
            // 解析 URL,执行对应操作
            Uri uri = Uri.parse(url);
            String action = uri.getQueryParameter("action");
            handleAction(action, uri);
            return true;
        }
        return false;
    }
});

方式二:注入 JS 全局对象

实现方式

iOS 端(WKWebView)

// 定义原生对象
class NativeBridge: NSObject {
    @objc func getUserInfo(_ callback: String) {
        let userInfo = ["name": "张三", "id": "123"]
        // 调用 H5 回调
        webView.evaluateJavaScript("\(callback)(\(userInfo))")
    }
    
    @objc func openPage(_ params: String) {
        // 解析参数,跳转页面
    }
}

// 注入对象
let contentController = WKUserContentController()
contentController.add(NativeBridge(), name: "nativeBridge")

let config = WKWebViewConfiguration()
config.userContentController = contentController

Android 端

// 定义原生对象
public class NativeBridge {
    @JavascriptInterface
    public String getUserInfo() {
        JSONObject userInfo = new JSONObject();
        userInfo.put("name", "张三");
        userInfo.put("id", "123");
        return userInfo.toString();
    }
    
    @JavascriptInterface
    public void openPage(String params) {
        // 解析参数,跳转页面
    }
}

// 注入对象
webView.addJavascriptInterface(new NativeBridge(), "nativeBridge");

H5 端

// 同步调用
const userInfo = window.nativeBridge.getUserInfo();
console.log(userInfo);

// 异步调用(iOS 需要回调函数名)
window.nativeBridge.getUserInfo('handleUserInfo');

function handleUserInfo(data) {
  console.log('收到用户信息:', data);
}


WebView 与原生通信
http://localhost:8090/archives/webview-yu-yuan-sheng-tong-xin
作者
Administrator
发布于
2026年01月15日
许可协议