html与ios交互方法 WebViewJavascriptBridge
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是异步的，首先执行同步任务，再执行异步任务
$(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)
}
//native调用js
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler('articleDetailViewInit', function (data, responseCallback) {
//字符串分割成一个数组
responseCallback('文章详情界面初始化成功');
})
})
//js调用native
function rewardBtnClickCallback(uid) {
WebViewJavascriptBridge.callHandler('rewardBtnClickCallback', uid, function (response) {
alert('native被调用:' + response);
});
}
}）
做个测试看看执行顺序
<!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的更多相关文章
- iOS与HTML5交互方法总结（转）
今天小编在找技术文章的时候,发现这样一个标题:iOS与HTML5交互方法总结,怎么看着这么熟悉呢? 还以为是刚哥用了别的文章,点进去一看,原来是刚哥自己写的文章,他们转载的,而且还上了Dev St ...
- iOS与HTML5交互方法总结(修正)
摘要 看了不少别人写的博客或者论坛,关于iOS与HTML5交互方法大概主要有5种方式: 1. 利用WKWebView进行交互(系统API) 2. 利用UIWebView进行交互(系统API) 3. 苹 ...
- Unity3D与iOS消息交互方法(1)--iOS接收Unity3D发出的消息
跨平台这种事情不管多NB, 总要有些与原生系统交互的方法, 比如 Unity3D与iOS消息交互方法. 一: 建立一个空的Unity工程. File --> New Project 二: 编 ...
- OC与JS交互之WebViewJavascriptBridge
上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...
- h5与安卓、ios交互
1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
- UNITY3D与iOS交互解决方案
原地址:http://bbs.18183.com/thread-456979-1-1.html 本帖最后由 啊,将进酒 于 2014-2-27 11:17 编辑 “授人以鱼,不如授人以渔”,以UNIT ...
- Unity与IOS交互
Unity IOS交互 @By 广州小龙 QQ群:63438968 环境:Mac os 10.9.2 Unity 4.2.1f4 Xcode 5.0.2 Unity IOS的交互我写过一个教程 ...
- js和android及ios交互
Android中Java和JavaScript交互 这种交互,Hybrid App 会用的比较多一点, 本文将介绍如何实现Java代码和Javascript代码的相互调用. Android提供了一个很 ...
- Unity与安卓IOS交互
记录下 安卓与Unity交互中 跳坑 找到的资料. <1>建立交互 http://blog.csdn.net/lizhengwei1989/article/details/54631 ...
随机推荐
- Dubbo的@Reference和@Service说明
前言 @Reference 用在消费端,表明使用的是服务端的什么服务 @RestController public class RemoteUserController { @Reference(ve ...
- Vue(day8)
继续上一篇文章的内容,本文主要内容为项目中新闻资讯模块的实现. 新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面. 一.新闻资讯的路由设计 将新闻资讯的标签改为路由:(a标签改为router- ...
- linux入门--操作系统是什么，操作系统概述
Linux 也是众多操作系统之一,要想知道 Linux 是什么,首先得说一说什么是操作系统. 计算机是一台机器,它按照用户的要求接收信息.存储数据.处理数据,然后再将处理结果输出(文字.图片.音频.视 ...
- 数组属性的习题、Arrays工具、二维数组
一.数组的练习 1.声明一个char类型的数组, 从键盘录入6个字符: [1]遍历输出 [2]排序 [3]把char数组转化成一个逆序的数组. import java.util.Scanner; pu ...
- ansible离线安装
目录 1. ansible离线安装 2. ansible配置文件 3. ansible常用的命令: 1. ansible离线安装 最近要在内网部署一台ansible服务器,只能手动离线安装ansibl ...
- .NET Core微服务之ASP.NET Core on Docker
Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.Docker极简介绍 1.1 总体介绍 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.D ...
- UmengAppDemo【友盟统计SDK集成以及多渠道打包配置，基于V7.5.3版本】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里只是记录下集成友盟统计SDK以及简单配置多渠道打包的步骤.所以1.该Demo不能运行:2.配置多渠道打包只是一种简单的写法,具体 ...
- springcloud~配置中心的使用
配置中心作为springcloud里最底层的框架,所发挥的意思是举足轻重的,所以的组件的配置信息都可以通过springcloud config来管理,它会把配置信息分布式的存储到git上,所以信息安全 ...
- 微信小程序 Request faild 请求后台失败
首先确认你的域名和ssl证书是否配置完成. 如果后台没有进行域名配置,先去配置一个有效的备案的自持https的域名. 1.建议备案超过24小时 2.ssl证书可以直接采用阿里云的免费证书 进行ss ...
- 面向对象之七大基本原则（javaScript）
1. 前言 2. 单一职责 3. 开闭原则 4. 里氏替换 5. 依赖倒置 6. 接口隔离 7. 迪米特法则 8. 组合聚合复用原则 9. 总结 1. 前言 面向对象编程有自己的特性与原则,如果对于面 ...