给postmessage加上callback方法
postmessage双向通信中,是不能使用回调函数的。
window.postmessage({msg:'hello',callback:function(e){ do something with e }})
这样是不行的,js会提示function不会被克隆。
我猜啊因为postmessage是通过dom通讯,js对象会被json化
也就是说不能传递方法。
不过,话说回来,有什么不能的呢,大不了,把function tostring一下,也是可以传过去的。
那这里就要考虑你传callback是干什么用了,如果是作为一种自定义 的数据处理方法,你就tostring一下,过去随便用用就好了,就好像foreach那样,传一个方法,在foreach内部用用。
如果就是想要得到返回值,让自己的书写比较连续。业务逻辑比较连续,callback的结果不会再传到对面。也就是说,callback始终是在本window下运行的。
保持业务逻辑连续的在你所写的方法里,不会因为调用postmessage而把业务处理逻辑跳跃到onmessage里。
这是我要在这里讨论的。
1.很显然,callback从来没真正被传递到对面window里。
2.callback将在onmessage(addlistoner里注册的接收事件)里执行。
3.基于以上两点 ,可以得出很简单的结论。在本window里缓存callback,等onmessage接收到对面发回来的数据时,用callback处理即可。
话有点儿绕嘴,分步来一次,应该会更清楚一点。
1.用postmessage发消息给对面。
2.对面收到消息,处理,
3.用postmessage给本地发消息。
4.本地接收到消息,处理
那么本地要用callback去处理,要知道用的是哪个function去处理。那么本地有一个指向callback的变量,就可以得到该callback。
而因为通讯不可能只一次,该callback会被放在数组里,同时会用唯一性id来标示它,而这个标示 也将被告诉对面window,再让对面告诉本地,从而,本地的接收事件中,去调用这个function。
还是绕,
写一下代码吧,也许代码一目了然。
对面的接收单元
window.addEventListener("message", function(e) { var data = e.data //拿到传递的数据 {msg:'给我来杯可乐',callbackid:'15146484468'} //打一杯可乐 var res = '返回的可乐' window.postmessage({result:res,callbackid:data.callbackid})//发出去 }, false);
本地的单元
var callbacks : {}
function 点杯可乐(callback){ callbacks[随机id] = callback xxxwindow.postmessage ({msg:'给我打一杯可乐',callbackid:'随机id'}) } function 吃肯德基的方法(){ //点汉堡 点汉堡(吃汉堡的方法) //点可乐 点杯可乐(喝可乐) //结账走人了 } //喝可乐就是callback对吧 function 喝可乐(){ //咚咚咚。。。哈 }
很显然,吃肯德基就是业务,那么业务顺序就是如此的,如果突然跳到接收事件里去吃汉堡,喝可乐,总是很诡异的。
通过,缓存callback假装callback被传递出去,然后被调用,其实,就达到了目的。
以上。