&>&WebViewJSBridge
WebViewJSBridge
上传大小：41KB
iOS WebView JSBridge
综合评分：0（0位用户评分）
所需积分：
下载个数：42
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var q = $("#form1").serializeArray();
console.log(q);
var res_area_r = $.trim($(".res_area_r").val());
if (res_area_r == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
var mess = $(".res_area_r").val();
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, _username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click",'.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
$(".res_area_r").val($.trim($(".res_area").val()));
评论共有0条
审核通过送C币
iOS开发学习电子书
iOS电子图书大全
创建者：qq_
[资源优选]第十八期：20个热门的SWIFT源码
创建者：nigelyq
上传者其他资源上传者专辑
移动开发热门标签
VIP会员动态
找不到资源？发布悬赏任务百万程序猿帮你提供！
下载频道部分积分规则调整公告
开通VIP，海量IT资源任性下载
二十大技术领域优质资源
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
CSDN&VIP年卡&4000万程序员的必选
WebViewJSBridge
会员到期时间：
剩余下载个数：
剩余C币：0
剩余积分：6726
积分不足！
资源所需积分
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分
当前拥有积分
当前拥有C币
(仅够下载10个资源)
全站1200个资源免积分下载
资源所需积分
当前拥有积分
当前拥有C币
全站1200个资源免积分下载
资源所需积分
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
全站1200个资源免积分下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
michaeldkaren
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
WebViewJSBridge前人栽树,后台乘凉,本文参考了以下来源
前置技术要求
阅读本文前，建议先阅读以下文章
上文中简单的介绍了JSBridge,以及为什么要用JSBridge,本文详细介绍它的实现原理
JSBridge是Native代码与JS代码的通信桥梁。目前的一种统一方案是:H5触发url scheme-&Native捕获url scheme-&原生分析,执行-&原生调用h5。如下图
url scheme介绍
上图中有提到url scheme这个概念,那这到底是什么呢?
url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的
具体为,可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),然后系统会进行判断,如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app
需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)
而本文JSBridge中的url scheme则是仿照上述的形式的一种方式
具体为,app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等
基于上述的基本原理,现在开始设计一种JSBridge的实现
要实现JSBridge,我们可以进行关键步骤分析
第一步:设计出一个Native与JS交互的全局桥对象
第二步:JS如何调用Native
第三步:Native如何得知api被调用
第四步:分析url-参数和回调的格式
第五步:Native如何调用JS
第六步:H5中api方法的注册以及格式
第一步:设计出一个Native与JS交互的全局桥对象
我们规定,JS和Native之间的通信必须通过一个H5全局对象JSbridge来实现,该对象有如下特点
该对象名为"JSBridge",是H5页面中全局对象window的一个属性
var JSBridge = window.JSBridge || (window.JSBridge = {});
该对象有如下方法
registerHandler(&String,Function&)H5调用&注册本地JS方法,注册后Native可通过JSBridge调用。调用后会将方法注册到本地变量messageHandlers&中
callHandler(&String,JSON,Function&)H5调用&调用原生开放的api,调用后实际上还是本地通过url scheme触发。调用时会将回调id存放到本地变量responseCallbacks中
_handleMessageFromNative(&JSON&)Native调用&原生调用H5页面注册的方法,或者通知H5页面执行回调方法
第二步:JS如何调用Native
在第一步中,我们定义好了全局桥对象,可以我们是通过它的callHandler方法来调用原生的,那么它内部经历了一个怎么样的过程呢？如下
callHandler函数内部实现过程
在执行callHandler时,内部经历了以下步骤:
(1)判断是否有回调函数,如果有,生成一个回调函数id,并将id和对应回调添加进入回调函数集合responseCallbacks中
(2)通过特定的参数转换方法,将传入的数据,方法名一起,拼接成一个url scheme
//url scheme的格式如
//基本有用信息就是后面的callbackId,handlerName与data
//原生捕获到这个scheme后会进行分析
var uri = CUSTOM_PROTOCOL_SCHEME://API_Name:callbackId/handlerName?data
(3)使用内部早就创建好的一个隐藏iframe来触发scheme
//创建隐藏iframe过程
var messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
document.documentElement.appendChild(messagingIframe);
//触发scheme
messagingIframe.src =
注意,正常来说是可以通过window.location.href达到发起网络请求的效果的，但是有一个很严重的问题，就是如果我们连续多次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。所以JS端发起网络请求的时候，需要使用iframe，这样就可以避免这个问题。---引自参考来源
第三步:Native如何得知api被调用
在上一步中,我们已经成功在H5页面中触发scheme,那么Native如何捕获scheme被触发呢？
根据系统不同,Android和iOS分别有自己的处理方式
Android捕获url scheme
在Android中(WebViewClient里),通过shouldoverrideurlloading可以捕获到url scheme的触发
public boolean shouldOverrideUrlLoading(WebView view, String url){
//读取到url后自行进行分析处理
//如果返回false，则WebView处理链接url，如果返回true，代表WebView根据程序来执行url
另外,Android中也可以不通过iframe.src来触发scheme,android中可以通过window.prompt(uri, "");来触发scheme,然后Native中通过重写WebViewClient的onJsPrompt来获取uri
iOS捕获url scheme
iOS中,UIWebView有个特性：在UIWebView内发起的所有网络请求，都可以通过delegate函数在Native层得到通知。这样,我们可以在webview中捕获url scheme的触发(原理是利用 shouldStartLoadWithRequest)
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL *url = [request URL];
NSString *requestString = [[request URL] absoluteString];
//获取利润url scheme后自行进行处理
之后Native捕获到了JS调用的url scheme,接下来就该到下一步分析url了
第四步:分析url-参数和回调的格式
在前面的步骤中,Native已经接收到了JS调用的方法,那么接下来,原生就应该按照定义好的数据格式来解析数据了
前面已经提到。Native接收到Url后,可以按照这种格式将回调参数id、api名、参数提取出来,然后按如下步骤进行
(1)根据api名,在本地找寻对应的api方法,并且记录该方法执行完后的回调函数id
(2)根据提取出来的参数,根据定义好的参数进行转化
如果是JSON格式需要手动转换,如果是String格式直接可以使用
(3)原生本地执行对应的api功能方法
(4)功能执行完毕后,找到这次api调用对应的回调函数id,然后连同需要传递的参数信息,组装成一个JSON格式的参数
回调的JSON格式为:{responseId:回调id,responseData:回调数据}
responseId&String型&H5页面中对应需要执行的回调函数的id,在H5中生成url scheme时就已经产生
responseData&JSON型&Native需要传递给H5的回调数据,是一个JSON格式:&{code:(整型,调用是否成功,1成功,0失败),result:具体需要传递的结果信息,可以为任意类型,msg:一些其它信息,如调用错误时的错误信息}
(5)通过JSBridge通知H5页面回调
第五步:Native如何调用JS
到了这一步,就该Native通过JSBridge调用H5的JS方法或者通知H5进行回调了,具体如下
//将回调信息传给H5
JSBridge._handleMessageFromNative(messageJSON);
如上,实际上是通过JSBridge的_handleMessageFromNative传递数据给H5,其中的messageJSON数据格式根据两种不同的类型,有所区别,如下
Native通知H5页面进行回调
数据格式为:&
Native主动调用H5方法
Native主动调用H5方法时,数据格式是:{handlerName:api名,data:数据,callbackId:回调id}
handlerName&String型&需要调用的,h5中开放的api的名称
data&JSON型&需要传递的数据,固定为JSON格式(因为我们固定H5中注册的方法接收的第一个参数必须是JSON,第二个是回调函数)
callbackId&String型&原生生成的回调函数id,h5执行完毕后通过url scheme通知原生api成功执行,并传递参数
注意,这一步中,如果Native调用的api是h5没有注册的,h5页面上会有对应的错误提示。
另外,H5调用Native时,Native处理完毕后一定要及时通知H5进行回调,要不然这个回调函数不会自动销毁,多了后会引发内存泄漏。
第六步:H5中api方法的注册以及格式
前面有提到Native主动调用H5中注册的api方法,那么h5中怎么注册供原生调用的api方法呢？格式又是什么呢?如下
H5中注册供原生调用的API
//注册一个测试函数
JSBridge.registerHandler('testH5Func',function(data,callback){
alert('测试函数接收到数据:'+JSON.stringify(data));
callback&&callback('测试回传数据...');
如上述代码为注册一个供原生调用的api
H5中注册的API格式注意
如上代码,注册的api参数是(data,callback)
其中第一个data即原生传过来的数据,第二个callback是内部封装过一次的,执行callback后会触发url scheme,通知原生获取回调信息
进一步完善JSBridge方案
在前文中,已经完成了一套JSBridge方案,这里,在介绍下如何完善这套方案
github上有一个开源项目,它里面的JSBridge做法在iOS上进一步优化了,所以参考他的做法,这里进一步进行了完善。地址
大致思路就是
h5调用Native的关键步骤进行拆分,由以前的直接传递url scheme变为传递一个统一的url scheme,然后Native主动获取传递的参数
完善以前: H5调用Native-&将所有参数组装成为url scheme-&原生捕获scheme,进行分析
完善以后: H5调用Native-&将所有参数存入本地数组-&触发一个固定的url scheme-&原生捕获scheme-&原生通过JSBridge主动获取参数-&进行分析
这种完善后的流程和以前有所区别,如下
JSBridge对象图解
JSBridge实现完整流程
由于这次完善的核心是:Native主动调用JS函数,并获取返回值。而在Android4.4以前,Android是没有这个功能的,所以并不完全适用于Android
所以一般会进行一个兼容处理,Android中采用以前的scheme传法,iOS使用完善后的方案(也便于4.4普及后后续的完善)
完整的JSBridge
上述分析了JSBridge的实现流程,那么实际项目中,我们就应该结合上述两种,针对Android和iOS的不同情况,统一出一种完整的方案,如下
完整调用流程图
如上图,结合上述方案后有了一套统一JSBridge方案
另外实现:不采用url scheme方式
前面提到的JSBridge都是基于url scheme的,但其实如果不考虑Android4.2以下,iOS7以下,其实也可以用另一套方案的,如下
Native调用JS的方法不变
JS调用Native是不再通过触发url scheme,而是采用自带的交互,比如
Android中,原生通过 addJavascriptInterface开放一个统一的api给JS调用,然后将触发url scheme步骤变为调用这个api,其余步骤不变(相当于以前是url接收参数,现在变为api函数接收参数)
iOS中,原生通过JavaScriptCore里面的方法来注册一个统一api,其余和Android中一样(这里就不需要主动获取参数了,因为参数可以直接由这个函数统一接收)
当然了,这只是一种可行的方案,多一种选择而已,具体实现流程请参考前面系列文章,本文不再赘述
本文中包括两个示例,一个是基础版本的JSBridge实现,一个是完整版本的JSBridge实现(包括JS,Android,iOS实现等)
基础版本的JSBridge
这里只介绍JS的实现,具体Android,iOS实现请参考完整版本,实现如下
(function() {
(function() {
var hasOwnProperty = Object.prototype.hasOwnP
var JSBridge = window.JSBridge || (window.JSBridge = {});
//jsbridge协议定义的名称
var CUSTOM_PROTOCOL_SCHEME = 'CustomJSBridge';
//最外层的api名称
var API_Name = 'namespace_bridge';
//进行url scheme传值的iframe
var messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + API_N
document.documentElement.appendChild(messagingIframe);
//定义的回调函数集合,在原生调用完对应的方法后,会执行对应的回调函数id
var responseCallbacks = {};
//唯一id,用来确保每一个回调函数的唯一性
var uniqueId = 1;
//本地注册的方法集合,原生只能调用本地注册的方法,否则会提示错误
var messageHandlers = {};
//实际暴露给原生调用的对象
var Inner = {
* @description 注册本地JS方法通过JSBridge给原生调用
* 我们规定,原生必须通过JSBridge来调用H5的方法
* 注意,这里一般对本地函数有一些要求,要求第一个参数是data,第二个参数是callback
* @param {String} handlerName 方法名
* @param {Function} handler 对应的方法
registerHandler: function(handlerName, handler) {
messageHandlers[handlerName] =
* @description 调用原生开放的方法
* @param {String} handlerName 方法名
* @param {JSON} data 参数
* @param {Function} callback 回调函数
callHandler: function(handlerName, data, callback) {
//如果没有 data
if(arguments.length == 3 && typeof data == 'function') {
callback =
handlerName: handlerName,
data: data
}, callback);
* @description 原生调用H5页面注册的方法,或者调用回调方法
* @param {String} messageJSON 对应的方法的详情,需要手动转为json
_handleMessageFromNative: function(messageJSON) {
setTimeout(_doDispatchMessageFromNative);
* @description 处理原生过来的方法
function _doDispatchMessageFromNative() {
if(typeof messageJSON === 'string'){
message = JSON.parse(messageJSON);
message = messageJSON;
} catch(e) {
//TODO handle the exception
console.error("原生调用H5方法出错,传入参数错误");
//回调函数
var responseC
if(message.responseId) {
//这里规定,原生执行方法完毕后准备通知h5执行回调时,回调函数id是responseId
responseCallback = responseCallbacks[message.responseId];
if(!responseCallback) {
//执行本地的回调函数
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
//否则,代表原生主动执行h5本地的函数
if(message.callbackId) {
//先判断是否需要本地H5执行回调函数
//如果需要本地函数执行回调通知原生,那么在本地注册回调函数,然后再调用原生
//回调数据有h5函数执行完毕后传入
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
//默认是调用EJS api上面的函数
//然后接下来原生知道scheme被调用后主动获取这个信息
//所以原生这时候应该会进行判断,判断对于函数是否成功执行,并接收数据
//这时候通讯完毕(由于h5不会对回调添加回调,所以接下来没有通信了)
handlerName: message.handlerName,
responseId: callbackResponseId,
responseData: responseData
//从本地注册的函数中获取
var handler = messageHandlers[message.handlerName];
if(!handler) {
//本地没有注册这个函数
//执行本地函数,按照要求传入数据和回调
handler(message.data, responseCallback);
* @description JS调用原生方法前,会先send到这里进行处理
* @param {JSON} message 调用的方法详情,包括方法名,参数
* @param {Function} responseCallback 调用完方法后的回调
function _doSend(message, responseCallback) {
if(responseCallback) {
//取到一个唯一的callbackid
var callbackId = Util.getCallbackId();
//回调函数添加到集合中
responseCallbacks[callbackId] = responseC
//方法的详情添加回调函数的关键标识
message['callbackId'] = callbackId;
//获取 触发方法的url scheme
var uri = Util.getUri(message);
//采用iframe跳转scheme的方法
messagingIframe.src =
var Util = {
getCallbackId: function() {
//如果无法解析端口,可以换为Math.floor(Math.random() * (1 && 30));
return 'cb_' + (uniqueId++) + '_' + new Date().getTime();
//获取url scheme
//第二个参数是兼容android中的做法
//android中由于原生不能获取JS函数的返回值,所以得通过协议传输
getUri: function(message) {
var uri = CUSTOM_PROTOCOL_SCHEME + '://' + API_N
if(message) {
//回调id作为端口存在
var callbackId, method,
if(message.callbackId) {
//第一种:h5主动调用原生
callbackId = message.callbackId;
method = message.handlerN
params = message.
} else if(message.responseId) {
//第二种:原生调用h5后,h5回调
//这种情况下需要原生自行分析传过去的port是否是它定义的回调
callbackId = message.responseId;
method = message.handlerN
params = message.responseD
//参数转为字符串
params = this.getParam(params);
//uri 补充
uri += ':' + callbackId + '/' + method + '?' +
getParam: function(obj) {
if(obj && typeof obj === 'object') {
return JSON.stringify(obj);
return obj || '';
for(var key in Inner) {
if(!hasOwnProperty.call(JSBridge, key)) {
JSBridge[key] = Inner[key];
//注册一个测试函数
JSBridge.registerHandler('testH5Func', function(data, callback) {
alert('测试函数接收到数据:' + JSON.stringify(data));
callback && callback('测试回传数据...');
***************************API********************************************
* 开放给外界调用的api
window.jsapi = {};
***app 模块
* 一些特殊操作
jsapi.app = {
* @description 测试函数
testNativeFunc: function() {
//调用一个测试函数
JSBridge.callHandler('testNativeFunc', {}, function(res) {
callback && callback(res);
完整版本的JSBridge
文章来源：/dailc/p/5931324.html
阅读(...) 评论()Javascript to Cocoa bridge for iOS - Objective-C - iPhone - UIKit - Binpress
Your cart is empty
All Platforms
All Categories
All Categories
Javascript to Cocoa bridge for iOS
Released 5 years ago
, Last update 5 years ago
A lightweight javascript bridge to cocoa
Framework:
Platform(s):
Product By
TGJSBridge is a lightweight javascript bridge to cocoa.
TGJSBridge is iOS4 and iPad compatible.
Usage in objective-c
Init jsBridge
TGJSBridge *jsBridge = [TGJSBridge jsBridgeWithDelegate: webViewDelegate];
webView.delegate = jsB
Send notification to javascript
postNotificationName:userInfo:toWebView:
Listen notification from javascript
- (void)jsBridge:(TGJSBridge *)bridge didReceivedNotificationName:(NSString *)name userInfo:(NSDictionary *)userInfo fromWebView:(UIWebView *)webview
Usage in webview
Send notification to cocoa
jsBridge.postNotification(msgName,userInfo);
Listen notification from cocoa
jsBridge.bind(msgName, function(userInfo){
Cancel listening notification from cocoa
jsBridge.unbind('test',callbackHandler);
14 day 14-day money-back guarantee
The BSD license is an open-source license.
What do you need?
Custom development
Integration
Customization / Reskinning
Consultation
When do you need it?
Next month
What you need in one sentence
Detailed description of your requirements
Get a quote
Thanks for getting in touch!
Your quote details have been received and we'll get back to you soon.
Or enter your name and Email
Selling Digital Products
The Binpress Marketplace
Learn More
powered by