给postmessage加上callback方法

小咪咪 2021-10-29 07:50 460阅读 0赞

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 : {}

window.addEventListener("message", function(e) \{

callbacks\[e.data.callbackid\](e.data.result)

\}

function 点杯可乐(callback){
         callbacks[随机id] = callback
         xxxwindow.postmessage ({msg:'给我打一杯可乐',callbackid:'随机id'})
    }
    
    function 吃肯德基的方法(){
          //点汉堡
             点汉堡(吃汉堡的方法)
          //点可乐
             点杯可乐(喝可乐)
          //结账走人了
    }
    //喝可乐就是callback对吧
    function 喝可乐(){
         //咚咚咚。。。哈  
    }

很显然，吃肯德基就是业务，那么业务顺序就是如此的，如果突然跳到接收事件里去吃汉堡，喝可乐，总是很诡异的。

通过，缓存callback假装callback被传递出去，然后被调用，其实，就达到了目的。

以上。

转载于:https://www.cnblogs.com/allofalan/p/11265486.html

发表评论取消回复

表情：

评论列表（有 0 条评论，460人围观）

还没有评论，来说两句吧...

相关阅读

相关 callback && callback()

背景： updateData(callback) { // 表示如果传入了callback，那么就调用callback(),否则不调用

短命女/ 2022年11月27日 08:46/ 0 赞/ 163 阅读

相关 three.js给场景加上阴影

学习交流欢迎加群：789723098，博主会将一些demo整理共享现实世界中（假设只在地球，先不考虑外太空），只要有光的地方就会有阴影产生。所以当我们构建好一个具备光照

朴灿烈づ我的快乐病毒、/ 2022年06月05日 06:27/ 0 赞/ 223 阅读

相关 linux小技能-给history加上时间

前言 history默认不能显示命令使用时间，这个时候我们可以给它加上这个功能配置 vim .bashrc export HISTTIMEFOR

妖狐艹你老母/ 2022年05月23日 07:56/ 0 赞/ 193 阅读

相关 java 给当前时间加上天数

import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut

快来打我*/ 2022年05月08日 11:04/ 0 赞/ 582 阅读

相关给AndroidStudio加上类注释，方法注释模板

![这里写图片描述][20160927225234043] 然后继续点击图示的加号，这次选择第一个，选择 ![这里写图片描述][20160927225420905

矫情吗；*/ 2022年04月11日 10:10/ 0 赞/ 446 阅读

相关 java给指定日期加上一年

/\\ \ 给指定日期加一年 \ @param date \ @param addyear

快来打我*/ 2022年04月10日 13:18/ 0 赞/ 1209 阅读

相关 mongodb给所有数据加上某个字段

mongodb，给所有的数据加上一个字段“mark”。需要把multi这个option设为true，才可以批量。 db.getCollection('xxx').up

小鱼儿/ 2022年01月20日 00:09/ 1 赞/ 600 阅读

相关给Nim程序加上图标

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 首先，需要有Mingw；其次，需要有一个icon文件

骑猪看日落/ 2022年01月16日 03:28/ 0 赞/ 281 阅读

相关给postmessage加上callback方法

postmessage双向通信中，是不能使用回调函数的。 window.postmessage({msg:'hello',callback:function(e){

小咪咪/ 2021年10月29日 07:50/ 0 赞/ 461 阅读

相关 jQuery Callback 方法

jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow

桃扇骨/ 2021年09月15日 07:40/ 0 赞/ 253 阅读