首页 / IOS / html与ios交互方法 WebViewJavascriptBridge

html与ios交互方法 WebViewJavascriptBridge

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了html与ios交互方法 WebViewJavascriptBridge，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8188字，纯文字阅读大概需要12分钟。

内容图文

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

html与ios交互方法 WebViewJavascriptBridge - 文章图片

内容总结

以上是互联网集市为您收集整理的html与ios交互方法 WebViewJavascriptBridge全部内容，希望文章能够帮你解决html与ios交互方法 WebViewJavascriptBridge所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/838898.html

来源：【匿名】

【上一篇】iOS 程序内语言切换 -- 中英文切换【下一篇】php如何实现ios推送

更多 ►

【html与ios交互方法 WebViewJavascriptBridge】教程文章相关的互联网学习教程文章

转载一篇关于iOS UIWebview 和javascript关联的文章

作者写的很明白，请参看原地址 http://blog.163.com/m_note/blog/static/208197045201293015844274/ 这里涉及的就是UIWebview的2个最主要的方法，stringByEvaluatingJavaScriptFromString: 和- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType 。第一个方法的主要功能是注入和执行javascript，具体是注入还是执行，要看你参照中的string的格式。第二个方法的主要是根据请...

iOS开发Safari调试WebView页面【图】

App混合开发现已是常态，不过作为app端开发人员，对H5页面的使用，可不能简单的局限于使用，一些简单的调试方法还是有必要了解的。关于如何在使用webview过程中，如何对web内对内容进行调试，这里会简单讲一下步骤。一、真机或Simulator 打开"设置"->"Safari"->"高级"->"Web检查器" 二、打开电脑上 Safari ->“偏好设置” -> “高级” -> “在菜单栏中显示开发选项”下面我会使用模拟器进行测试。三、这时，我们不运行app，...

iOS开发webView的使用二【代码】

#import"ViewController.h"@interface ViewController ()<UIWebViewDelegate> @property (weak, nonatomic) IBOutlet UIWebView *webView; @property (weak, nonatomic) IBOutlet UIBarButtonItem *goBack; @property (weak, nonatomic) IBOutlet UIBarButtonItem *goForward;@end@implementation ViewController#pragma mark ---------------------- #pragma mark Life Cycle - (void)viewDidLoad {[super viewDidLoad];NSURL *ur...

IOS客户端UIwebview下web页面闪屏问题

基于ios客户端uiwebview下的web页面，在其内容高度大于视窗高度时，如果点击超过视窗下文档的底部按钮，收缩内容高度，会发生闪屏问题。外因是由文档的高度大于视窗的高度所致，本质原因未知。解决办法：　　为最外层的元素设置height:100%(要保证100%的高度等于视窗高度)，overflow:scroll,如果想避免出现滚动条的话，还可以在最外层元素加上伪类::-webkit-scrollbar{display:none}，即可完美解决闪屏问题。原文：http://www.cnb...

IOS UIWebView使用开发

NSURL *loadingUrl = [NSURL URLWithString:@"www.baidu.com"];NSURLRequest *request = [NSURLRequest requestWithURL:loadingUrl];UIWebView string原文：http://roderickkennedy.blog.51cto.com/6758427/1553087

iOS: 计算 UIWebView 的内容高度【代码】【图】

- (void)webViewDidFinishLoad:(UIWebView *)wb { //方法1 CGFloat documentWidth = [[wb stringByEvaluatingJavaScriptFromString:@"document.getElementById(‘content‘).offsetWidth"] floatValue]; CGFloat documentHeight = [[wb stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"content\").offsetHeight;"] floatValue]; NSLog(@"documentSize = {%f, %f}", documentWidth, documentHeight);//方法2 C...

vue中的方法如何暴露给webview，使安卓和iOS可以调用【代码】【图】

新建一个外部公共的js文件app.js，定义一个对象并输出，如下：var hybrid = {} window.Hybrid = hybrid if (window.Vue) { // 自动绑定 window.Vue.use(hybrid) }export { hybrid }在需要的文件中引入app.js，将需要暴露的方法赋给hybrid对象，如下：在安卓或者iOS上可调用hybrid.clickMusic来执行函数原文：http://www.cnblogs.com/xunhuang/p/7514115.html

iOS 获取UIWebView上面的按钮点击事件

UIWebView的一些用法总结的网址 http://blog.csdn.net/zhaoweixing1989/article/details/13021513 在网上看到很多文章都说iOS的UIWebView比较耗内存，在我的项目中，最开始我也是用UIWebView来加载网页的。刚开始加载的是自己拼接成的Html，后来在Html中加入一个按钮，点击之后用当前的UIWebView去加载网络上的网页。程序跑起来发现非常耗内存，加载几个网上的网页之后就爆内存警告了，不处理的话很容易被评估拒掉app。后来就改成...

ios开发 uiwebview加载网页时阻止禁止取消图片下载【代码】

http://www.icab.de/blog/2009/08/18/url-filtering-with-uiwebview-on-the-iphone/ - (NSCachedURLResponse*)cachedResponseForRequest:(NSURLRequest*)request {NSURL *url = [request URL];BOOL blockURL = [url.absoluteString hasSuffix:@"jpg"] || [url.absoluteString hasSuffix:@"jpeg"] || [url.absoluteString hasSuffix:@"png"] || [url.absoluteString hasSuffix:@"gif"] || [url.absoluteString hasSuffix:@"ico"] ||...

ios-UIWebView中js和oc代码的互调【代码】

webview是ios中显示远程数据的网页控件，webview能显示的内容很多，MP4、文本、pdf等等；关于js和oc代码的互相调用1：oc中调用js代码;>>oc中调用js代码很简单，一个方法：stringByEvaluatingJavaScriptFromString：@“”；>>要执行的js代码方法到字符串中就可以了；2：js中执行oc的某段代码；>>js中执行oc的代码要通过一个桥梁:　　者桥梁就是webview的一个代理方法：(BOOL)webView:(UIWebView *)webView shouldStartLoadWithReque...

iOS UIWebView 访问https绕过证书验证的方法

@implementation NSURLRequest (NSURLRequestWithIgnoreSSL)+ (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host{ return YES;}@end原文：http://www.cnblogs.com/feng9exe/p/8046077.html

iOS开篇——UI之UIWebView【代码】

webView使用 loadRequest: 方法请求数据的加载 1 - (void)createWebView{2//创建全屏大小的webView 3 UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.bounds];4 view.tag = 1;5//创建一个网址对象 6 NSURL * url = [NSURL URLWithString:@"http://www.baidu.com"];7//网络请求 8 NSURLRequest * request = [[NSURLRequest alloc]initWithURL:url];910//用网络请求数据加载webView11 [view load...

IOS webview部分选中链接中的文字【图】

这是我本周遇到遇到的最奇葩的问题，没有之一。先放一张成功之后的效果图：一个图文混排的列表页，在需要选择部分文字进行copy的时候，IOS个二货每次都是直接选中了整个列表项，无论怎么操作它的选框都没有办法做到部分选中。仔细思考并试验之后，找到了两个解决方案：一、把需要选中的文字放进input[text]，然后用oninput屏蔽掉input的输入；二、分析html/css研究下ios为啥总是傻傻分不清楚，只能整块整块的选中；方案一，完美实现...

IOS 错误 [UIWebView cut:]: unrecognized selector sent to instance【代码】

那在什么场景中会出现这种情况呢？如果一个包含文字的输入元素有焦点，然后按钮的点击会导致输入失去焦点，然后接下来在输入时双按会重新得到焦点并从弹出bar中选择剪切复制粘贴，就会导致此error。也就是说当WebView页面中的HTML中有如下代码的时候<input type="text"><input type="button">即有输入框和按钮的时候，会出现 [UIWebView cut:]: unrecognized selector sent to instance 的错误风险简单的说就是若有一个WebView中有...

iOS 修改UIWebView的UserAgent【代码】

iOS和H5交互的时候，H5需要用userAgent带一些参数，需要我们修改默认的UserAgent为自定义的。首先，给大家普及一下userAgent的历史，点击UserAgent查看。网上搜了好多资料。没有一个方式是好用的，总结起来，以下2个方法都不好用：1 ，直接设置request的header里面的userAgentNSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:url];[request addValue:@"Jiecao/2.4.7" forHTTPHeaderField:@"user-agent"]...

首页 / IOS / html与ios交互方法 WebViewJavascriptBridge

html与ios交互方法 WebViewJavascriptBridge

内容导读

内容图文

WebViewJavascriptBridge

内容总结

内容备注

内容手机端

【html与ios交互方法 WebViewJavascriptBridge】教程文章相关的互联网学习教程文章

转载一篇关于iOS UIWebview 和javascript关联的文章

iOS开发Safari调试WebView页面【图】

iOS开发webView的使用二【代码】

IOS客户端UIwebview下web页面闪屏问题

IOS UIWebView使用开发

iOS: 计算 UIWebView 的内容高度【代码】【图】

vue中的方法如何暴露给webview，使安卓和iOS可以调用【代码】【图】

iOS 获取UIWebView上面的按钮点击事件

ios开发 uiwebview加载网页时阻止禁止取消图片下载【代码】

ios-UIWebView中js和oc代码的互调【代码】

iOS UIWebView 访问https绕过证书验证的方法

iOS开篇——UI之UIWebView【代码】

IOS webview部分选中链接中的文字【图】

IOS 错误 [UIWebView cut:]: unrecognized selector sent to instance【代码】

iOS 修改UIWebView的UserAgent【代码】

JAVASCRIPT - 相关标签

WEBVIEW - 相关标签

HTML - 相关标签

IOS - 最新教程

IOS - 最热教程