感谢Danny分享,我读了http://ask.dcloud.net.cn/question/7493的代码,用另一种更简单的方法实现。
以下是我的代码,可以跨webview调用函数,调用时也可以添加回调函数。
(function($) {
$.ge = [];
$.ge.callbackCount = 0;
$.ge.prefix = "globalEvent.";
$.ge.addListener = function(eventName, fn) {
window.addEventListener($.ge.prefix eventName, fn);
$.ge.push(eventName);
}
$.ge.removeListener = function(fn) {
window.removeEventListener(fn);
}
/**
* 触发事件
* @eventName 事件名称
* @args 参数
* @callback 回调函数
* @webviewId 要调用的webviewId,不指定则调用所有webview上的事件监听器
*/
$.ge.fireEvent = function(eventName, args, callback, webviewId) {
//如果有回调函数,则在参数中添加回调函数的信息
if (callback) {
var callback_name = "globalEvent_callback" $.ge.callbackCount;
$.ge.callbackCount ;
$.extend(args, {
globalEvent_callback: callback_name,
globalEvent_webviewId: plus.webview.currentWebview().id
});
//添加回调事件监听
$.ge.addListener(callback_name, callback);
}
if (webviewId) {
var wv = plus.webview.getWebviewById(webviewId);
mui.fire(wv, $.ge.prefix eventName, args);
} else {
var views = plus.webview.all();
for (var i = 0; i < views.length; i ) {
mui.fire(views[i], $.ge.prefix eventName, args);
}
}
}
/**
* 调用回调函数,若事件触发者没有提供回调函数,则什么都不做
* @call_args 调用者的参数
* @args 回传给调用者的参数
*/
$.ge.callback = function(call_args, args) {
var id = call_args.detail.globalEvent_webviewId;
var eventName = call_args.detail.globalEvent_callback;
if (id != null && eventName != null) {
$.ge.fireEvent(eventName, args, null, id);
}
}
})(mui);
使用示例:
//登陆页面
function onLoginSuccess() {
mui.ge.fireEvent("login", {
info: "登陆成功"
}, function(args) {
args.detail.info //收到消息
})
}
//订单列表页面
mui.plusReady(function() {
mui.ge.addListener("login", function(args) {
args.detail.info //登陆成功
mui.ge.callback(args, {
info: "收到消息"
})
});
});
欢迎讨论
7 个回复
guyskk (作者) - https://plant.onebizlab.top
感谢Danny分享,我读了http://ask.dcloud.net.cn/question/7493的代码,用另一种更简单的方法实现。
以下是我的代码,可以跨webview调用函数,调用时也可以添加回调函数。
使用示例:
欢迎讨论
guyskk (作者) - https://plant.onebizlab.top
问题解决了,代码如下
用法:
在其他页面引入这个js,在mui.plusReady里面调用mui.ge.addListener 添加事件监听。
登录页面登录成功后调用mui.ge.fireEvent。
:)
DCloud_heavensoft
http://ask.dcloud.net.cn/question/4970
guyskk (作者)
localStorage或sessionStorage能保存全局数据,但是不能实现事件监听啊
2015-07-18 09:10
chender - 与人为善
原理和我写的那个差不多,都是通过一层代理,实现回调的功能,只是你这是使用了事件机制;
个人感觉直接使用方法调用比用事件机制方便得多,比如我的某个webview里面有一个api要暴露给其他webview使用,需要通过xxx.addListener(xxx,function(){})来监听其他界面的调用请求,然后在事件处理里面提供对应的服务,肯定没有我直接写一个 function(){xxx....;return xxx}方便;
另外提一个优化的建议,你这个实现里面,每一次调用都会进行一次window.addEventListener;目测调用次数超过一次时,会出现逻辑错误,调用次数达到一定的量时会出现性能问题;
guyskk (作者)
你的确实更方便,但是不能使用闭包,比如要用到其他函数内的变量时,不过这也要看具体需求。
另外 目测调用次数超过一次时,会出现逻辑错误。能详细说吗?
调用次数达到一定的量时会出现性能问题;这个确实是,我在考虑回调函数执行之后自动移除监听器。但是如果事件监听者可以有多个,那么回调函数可以执行多次,我还没想好要要怎样自动移除回调监听器。
2015-07-19 11:00
chender
我那个能使用闭包哈,能callback就能使用闭包;
逻辑错误那个是我看错了,因为你贴的代码里面“+”号没显示出来啊;
事件监听者有多个就意味着是调了多次 mui.ge.fireEvent,每次的eventName是不一样的
2015-07-19 12:52
1***@qq.com
mark
太2真人
都是牛人。嘿嘿
Danny - QQ125904483
这个大哥的分享不知道适用否:
http://ask.dcloud.net.cn/question/7493