ios客户端跟h5页面桥接

最新推荐文章于 2025-03-29 11:45:39 发布

垚~垚

最新推荐文章于 2025-03-29 11:45:39 发布

阅读量2k

点赞数 1

分类专栏： js 文章标签：客户端 ios h5

本文链接：https://blog.youkuaiyun.com/luoyumeiluoyumei/article/details/89092065

版权

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在WebView中实现JavaScript与原生应用交互的方法。通过创建Bridge.js模块，可以轻松地在iOS与H5之间建立通信渠道。文章详细解释了如何设置WebViewJavascriptBridge，并提供了注册及调用方法的具体实现。

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

1.新建Bridge.js模块

function setupWebViewJavascriptBridge(callback) {
  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 function callhandler(name, data, callback) {
  setupWebViewJavascriptBridge(function (bridge) {
    bridge.callHandler(name, data, callback)
  })
}
export function registerhandler(name, callback) {
  setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler(name, function (data, responseCallback) {
      callback(data, responseCallback)
    })
  })
}

2.在使用的模块中引入Bridge.js或者放到公共的js中

import * as Bridge from './bridge';//引ios桥接

ios调用h5的方法

Bridge.registerhandler('方法名', res => { 执行对应的操作 })

h5调用ios的方法

Bridge.callhandler('方法名', { 传递的参数，不需要传参数传空对象 }, res => {执行对应的操作})