WebView 如何与原生应用交互？JS Bridge 原理是什么？

WebView 如何与原生应用交互？JS Bridge 原理是什么？

WebView 与原生交互本质是JS 和 Native 之间的双向通信，核心方案：

Native → JS：

• Android：evaluateJavascript(script, callback)（API 19+）
• iOS：evaluateJavaScript(script, completionHandler)

JS → Native：

1. URL Scheme 拦截：JS 修改 window.location = "scheme://action?params"，Native 拦截 shouldOverrideUrlLoading 解析执行。兼容性最好，但 URL 长度受限
2. prompt/alert 拦截：JS 调 prompt()，Native 在 onJsPrompt 中拦截。支持大参数，但会阻塞 JS 线程
3. JS Bridge 注入：Native 通过 addJavascriptInterface（Android）/ WKScriptMessageHandler（iOS）向 JS 上下文注入对象，JS 直接调用原生方法。最主流的方案

通信协议设计：

• 请求：{ method: "getUserInfo", params: {}, callbackId: "cb_123" }
• 响应：Native 执行 JS 回调函数 Bridge.callbacks["cb_123"](result)

关键注意事项：

• 安全：Android addJavascriptInterface 在 API < 17 有反射漏洞，需校验调用来源
• 线程：Native 回调在非 UI 线程，操作 UI 需切换到主线程
• 生命周期：页面销毁后 JS 回调可能崩溃，需清空回调队列

追问

1. 三种 JS→Native 方案怎么选？ — URL Scheme 兼容性好，prompt 支持大数据，注入对象最优雅，实际项目通常组合使用
2. 如何设计通用的 Bridge 协议？ — 统一 method/params/callbackId，Native 端注册 Handler 映射表
3. Bridge 通信有性能瓶颈吗？ — 高频调用（如滚动事件）会有延迟，需节流或改用批量传递
4. iOS WKWebView 和 UIWebView 交互有什么区别？ — UIWebView 用 JSContext 注入，WKWebView 只能用 messageHandler + evaluateJavaScript