前端vue使用WebViewJavascriptBridge和原生交互问题记录（记录第二次调用失败问题：代码中已解决）

一个柠檬

于 2019-11-14 11:18:08 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/A13330069275/article/details/103064021

本文记录了一次在前端Vue项目中使用WebViewJavascriptBridge与原生应用交互时遇到的第二次调用失败的问题。详细探讨了解决方案，包括问题定位和代码修复，帮助开发者理解如何正确处理类似问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// util/bridge.js

function setupWebViewJavascriptBridge (name, data, callback) {
  // 这里若是bridge存在则直接调用native方法并且return
  if (window.bridge) {
    window.bridge.callHandler(name, data, callback)
    return
  }
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  let WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__BRIDGE_LOADED__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(name, data, function (bridge) {
      // 注意：这里将bridge挂载window上，因为笔者二次调用失败。
      if (!window.bridge) {
        window.bridge = bridge
      }
      window.bridge.