JS和安卓IOs的交互

最新推荐文章于 2023-03-01 14:27:45 发布

AnlanJion

最新推荐文章于 2023-03-01 14:27:45 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js

本文链接：https://blog.youkuaiyun.com/AnlanJion/article/details/86489536

前端专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种跨平台技术，实现网页与原生应用（Android和iOS）之间的交互，通过注册和调用任务的方式，使WebView能够与原生代码进行通信，适用于移动开发中常见的场景。

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

// 页面与安卓或ios的交互
export const u = navigator.userAgent
export const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
export function interactiveBridge (sendName, receiveName, sendData, receiveCallback) {
  if (isiOS) {
    // ios终端
    setupWebViewJavascriptBridge(function (bridge) {
      // 注册任务
      bridge.registerHandler(receiveName, function (data, responseCallback) {
        receiveCallback(data)
      })
      // 发布任务
      bridge.callHandler(sendName, sendData, function (response) {
      })
    })
  } else {
    // android终端
    // 发布任务
    (function () {
      try {
        // eslint-disable-next-line
        javascript:android[sendName](JSON.stringify(sendData))
      } catch (e) {
      }
    })()
    // 这个方法用于接收code
    window[receiveName] = function (data) {
      receiveCallback(data)
    }
  }
}

function setupWebViewJavascriptBridge (callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  var WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(function () {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}