AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

html与ios交互方法 WebViewJavascriptBridge

分类：iOS作者：编程之家原文地址

WebViewJavascriptBridge

1.html调用ios的方法

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
        //iOS用于js交互必备代码：
        function setupWebViewJavascriptBridge(callback) {
          if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback];
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
          setTimeout(function () {
            document.documentElement.removeChild(WVJBIframe)
          }, 0)
        }

        // setupWebViewJavascriptBridge(function(bridge) {
        //     // native调用js
        //   // bridge.registerHandler('jsHandlerName', function(data, responseCallback) {
        //   //     // data为ObjC传递给JS的数据
        //   //     console.log("JS Echo called with:", data)
        //   //     // js返回数据给Objc
        //   //     responseCallback('返回一个字符串，告诉ObjC：我已收到数据data')
        //   // })
        //   // js调用native的方法
        //   bridge.callHandler('getUserCoorCallback', '获取用户位置信息经纬度的回调', function responseCallback(res) {
        //       // responseData返回的数据
        //       alert(res)
        //   })
        // })


        function getData(name,data){
          setupWebViewJavascriptBridge(function(bridge) {
            // native调用js
            // bridge.registerHandler('jsHandlerName', function(data, responseCallback) {
            //     // data为ObjC传递给JS的数据
            //     console.log("JS Echo called with:", data)
            //     // js返回数据给Objc
            //     responseCallback('返回一个字符串，告诉ObjC：我已收到数据data')
            // })
            // js调用native的方法
            bridge.callHandler(name,data, function responseCallback(res) {
                // responseData返回的数据
                alert('位置信息：'+res)
            })
          })
        }
        alert('执行1')
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')
        alert('执行2')

    })
  </script>
</body>

</html>

打印结果

//执行1

//执行2

//位置信息： 22.581529；113971377

注意：setupWebViewJavascriptBridge是异步的，首先执行同步任务，再执行异步任务

 

做个测试看看执行顺序

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
        //iOS用于js交互必备代码：
        function setupWebViewJavascriptBridge(callback) {
          alert('1')
          if (window.WebViewJavascriptBridge) {
            alert('7')
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            alert('8')
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback];
          alert('2')
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
          alert('3')
          setTimeout(function () {
            alert('4')
            document.documentElement.removeChild(WVJBIframe)
          }, 0)
        }

        function getData(name,data){
          setupWebViewJavascriptBridge(function(bridge) {
            alert(5)
            bridge.callHandler(name,data,function responseCallback(res) {
                alert(6)
                alert(res)
            })
          })
        }
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')
    })
  </script>
</body>

</html>

执行顺序会按照alert 1-6 依次执行，不执行 7和8

 

再做测试 执行两次

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
        //iOS用于js交互必备代码：
        function setupWebViewJavascriptBridge(callback) {
          alert('1')
          if (window.WebViewJavascriptBridge) {
            alert('7')
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            alert('8')
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback];
          alert('2')
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
          alert('3')
          setTimeout(function () {
            alert('4')
            document.documentElement.removeChild(WVJBIframe)
          }, 0)
        }

        function getData(name,data){
          setupWebViewJavascriptBridge(function(bridge) {
            alert(5)
            bridge.callHandler(name,data,function responseCallback(res) {
                alert(6)
                alert(res)
            })
          })
        }
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')
        getData('getUserCoorCallback', '获取用户位置信息经纬度的回调')

        // 执行顺序1 2 3 1 8 4  5 5 6 经纬度 6 经纬度
    })
  </script>
</body>

</html>

执行顺序按照1 2 3 1 8 4 5 5 6 经纬度 6 经纬度

 

 

 

2.vue调用ios的方法

步骤1.新建bridge.js文件 

在src下新建lib目录   新建 bridge.js文件    也可以把文件放在config目录下

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)
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  registerhandler (name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

步骤2.引入bridge.js文件

方式1：全局引入

//main.js文件

//bridge.js放在lib目录下
// import Bridge from '../src/lib/bridge'
Vue.prototype.$bridge = Bridge


//bridge.js放在config目录下
import Bridge from '../config/bridge'
Vue.prototype.$bridge = Bridge

方式2：局部引入

在组件内

<script>
//对应bridge.js的路径
import Bridge from '../lib/bridge'
//或者
import Bridge from '../../config/bridge'
export default{

}
<script>

 

步骤3.使用

全局引入的方式

    //全局引入调用 对应步骤2的方式1
      this.$bridge.callhandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
        alert(data)
       })

    //局部引入调用  对应步骤2的方式2
      Bridge.callhandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
        alert(data)
      })

 

但是按照网上的方法以上步骤都无法获取到WebViewJavascriptBridge对象，

本人尝试在vue 根目录下的index.html文件上加上，然后马上执行setupWebViewJavascriptBridge()，才终于获取到WebViewJavascriptBridge对象，原因不明。有知道原因的朋友请解答一下。

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>活动</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    setupWebViewJavascriptBridge()
  </script>
</html>

 

 

 

补充：

第一次交互的时候，alert(this.$bridge)为Object

当我们尝试看看WebViewJavascriptBridge，alert(WebViewJavascriptBridge)  或 alert(window.WebViewJavascriptBridge)都是undefined，

本人马大哈，把方法名callhandler打callHandler了。因为export default导出的是一个对象，他有两个方法。1是callhandler(name,data,callback)，2是registerhandler(name,callback)。

当一开始执行的时候WebViewJavascriptBridge是undefined，因为没有执行callhandler方法来执行 setupWebViewJavascriptBridge ，所以alert(WebViewJavascriptBridge) 是undefined。

执行完setupWebViewJavascriptBridge后，我们才能在ios中获取到WebViewJavascriptBridge对象，从而实现html与ios的交互。

    //错误
      this.$bridge.callHandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
         alert(data)
       })
    //正确
       this.$bridge.callhandler('getUserCoorCallback', "获取用户位置信息经纬度的回调", (data) => {
      // 处理返回数据
         alert(data)
       })

 

 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

iOS开发-UITabbarController的介绍与使用
UITabBarController 是 iOS 中用于管理和显示选项卡界面的一个视图控制器。它允许用户在多个视图控制器之间进行切换，每个视图控制器对应一个选项卡。 主要功能 管理多个视图控制器： UITabBarController 管理一个视...
iOS开发-UITableView的重用机制
UITableView的重用机制避免了频繁创建和销毁单元格的开销，使得在显示大量数据时，保持流畅的用户体验和较低的资源消耗。。 当UITableView滚动时，屏幕上移出视图的单元格会被回收到一个重用池中。当需要显示新的单元...
iOS开发-属性的内存管理
Objective-C中，类的实例变量（instance variables）和属性（properties）是两种不同的概念，其中属性的内存管理就较为复杂。Objective-C 提供了多种属性修饰符，用于管理对象的内存。这些修饰符用于控制对象的生命周...
OC-从内存角度理解block可作为方法传入参数的原因
从内存管理的角度来看，block可以作为方法的传入参数是因为block在Objective-C中被设计为一种特殊的对象，它们可以在堆（heap）上分配和管理。这使得block可以像其他对象一样被传递、复制和持有。以下是一些关键点，...
iOS开发-WKWebView的介绍与基本使用
WKWebView 是 iOS 开发中用于显示网页内容的组件，它是在 iOS 8 中引入的，作为 UIWebView 的替代品。WKWebView 提供了更高的性能和更多的功能，它是基于 WebKit 引擎的，这也是 Safari 浏览器所使用的引擎。 主要特...
iOS开发-多线程编程
OC中常用的多线程编程技术： 1. NSThread NSThread是Objective-C中最基本的线程抽象，它允许程序员直接管理线程的生命周期。 NSThread *myThread = [[NSThread alloc] initWithTarget:self selector:@selec
iOS开发- Xcode常用的快捷键
以下是一些常用的 Xcode 快捷键： 构建和运行: Command + B: 构建当前项目。 Command + R: 构建并运行当前项目。 Command + .: 停止运行项目。 代码编辑: Command + ] / Command + [: 增加或减少...
iOS面试题-tableivew上面展示图片的时候，在网络还未回来时，将cell滑走，那被划走的cell还会不会显示图片？
当在UITableViewCell中加载网络图片时，如果在图片下载完成之前用户滑动了UITableView，使得对应的UITableViewCell已经滑出屏幕，那么这个被滑走的UITableViewCell是否还会显示图片，取决于如何处理图片的加载和UITa...
iOS开发-手势
UIGestureRecognizer 用于检测和处理手势的抽象基类。提供了检测用户手势的基本功能，如点按、滑动、捏合、旋转等。通过使用 UIGestureRecognizer 子类，可以为视图添加手势识别功能，增强用户交互体验。 常见的 UIG...
iOS开发-图片UIImage
UIImage 和 UIImageView 是 iOS 开发中常用的两个类，分别用于表示图像数据和显示图像。 UIImage UIImage 是一个表示图像数据的类，可以从文件、数据、图像资源库等加载图像。UIImage 支持多种图像格式，包括 PNG、J...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native