React JS中如何触发原生桥接事件一次性关闭全部Webview

你需要让Web端和原生端提前约定统一的桥接调用协议，点击关闭按钮时由Web端向原生发送关闭信号，原生端收到信号后执行销毁Webview的逻辑即可，各端实现如下：

先封装桥接调用逻辑，绑定到关闭按钮的点击事件即可：

// 关闭按钮点击事件处理函数
const handleCloseWebview = () => {
  // 适配Android环境
  if (window.androidInterface && typeof window.androidInterface.closeWebview === 'function') {
    window.androidInterface.closeWebview()
    return
  }
  // 适配iOS WKWebView环境
  if (window.webkit?.messageHandlers?.closeWebview) {
    window.webkit.messageHandlers.closeWebview.postMessage(null)
    return
  }
  // 兜底：普通浏览器环境下的逻辑，可自定义
  console.log('非App内嵌环境，无法关闭Webview')
}

// 组件内使用
function CloseButton() {
  return <button onClick={handleCloseWebview}>×</button>
}

上述代码里的androidInterface、closeWebview是约定的桥接命名，可以和原生开发同学协商调整，保持两端一致即可。

给承载网页的WebView配置桥接接口：

// 第一步：开启WebView的JavaScript支持
webView.getSettings().setJavaScriptEnabled(true);
// 第二步：绑定桥接接口，和前端约定的androidInterface名称对应
webView.addJavascriptInterface(new WebJavascriptInterface(), "androidInterface");

// 自定义桥接接口类
public class WebJavascriptInterface {
    @JavascriptInterface
    public void closeWebview() {
        // 执行关闭Webview的逻辑，比如销毁当前Activity
        finish();
        // 或者如果Webview是在Fragment里，执行移除Fragment/销毁Webview的操作即可
    }
}

针对现在通用的WKWebView进行配置：

// 第一步：添加桥接监听，和前端约定的closeWebview名称对应
webView.configuration.userContentController.add(self, name: "closeWebview")

// 第二步：实现监听代理方法
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "closeWebview" {
            // 执行关闭Webview逻辑，比如dismiss当前控制器、pop回上一级
            self.dismiss(animated: true)
            // 或者执行pop操作：self.navigationController?.popViewController(animated: true)
        }
    }
}

// 注意：页面销毁时移除监听避免内存泄漏
override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    webView.configuration.userContentController.removeScriptMessageHandler(forName: "closeWebview")
}

• 两端约定的桥接命名、方法名必须完全一致，避免调用失败
• Android端的桥接方法必须添加@JavascriptInterface注解，否则Android 4.2以上版本无法识别
• 前端的兼容性判断可以避免非内嵌环境下的控制台报错问题

内容的提问来源于stack exchange，提问作者Abhi Singh