WebView向iOS原生WKWebView动态指定消息处理器名称的实现咨询

问题描述 #

WebView 需要向 iOS 原生 WKWebView 发送消息，当前使用的固定语法为：window.webkit.messageHandlers.countryListHandler.postMessage("data")。想实现动态调用该方法，已知消息内容可动态设置，询问消息处理器名称是否也能动态指定，并给出了设想的实现代码：

function callFunction(handlerName, body) {
  window.webkit.messageHandlers.{handlerName}.postMessage(body);
}

解答 #

可以动态指定处理器名称，但你提供的代码语法有误，修正后即可实现：

• JavaScript 中动态访问对象属性时，不能直接使用 {handlerName} 这种模板语法，必须改用方括号属性访问语法：window.webkit.messageHandlers[handlerName]
• 修正后的可用代码（增加了存在性判断，避免原生未注册处理器时报错）：

function callFunction(handlerName, body) {
  // 先校验处理器是否存在
  if (window.webkit?.messageHandlers?.[handlerName]) {
    window.webkit.messageHandlers[handlerName].postMessage(body);
  } else {
    console.warn(`原生端未注册名为 ${handlerName} 的消息处理器`);
  }
}

• 注意事项：iOS 原生端必须提前通过 WKWebViewConfiguration 的 userContentController 注册对应的 handlerName 处理器（实现 WKScriptMessageHandler 协议），否则动态调用会失效。

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