javascript - 具有多个函数或自定义回调的 PostMessage

Question

到目前为止，我只看到过关于 postmessage 的教程，其中一个窗口发送一种消息，而另一个窗口仅以一种方式解释消息。

如果我想在窗口之间进行许多不同类型的交互怎么办，postmessage 可以处理吗？

这是否违背了 postmessage 应该做的事情？

例如，如果我希望能够来回发送自定义回调等怎么办？

Answer 1

有几种方法可以将多部分消息传递到 postMessage处理程序。第一种(也是不太“干净”的方式)是使用分隔符，然后通过字符串传递数据。

假设我们想要传递一个用户 ID、一个操作和用户名。字符串如下所示:
54|do_logout|chris
内postMessage handler，传入的数据可以是split ( docs ) 关于 |字符，则可以根据需要使用消息的每个段。

另一种方法是使用 JSON (docs) 将对象转换为一侧的字符串，并使用 JSON 转换回处理程序中的对象，而不是手动创建/拆分字符串。

var pass_data = {
    'name':'Chris',
    'id':54,
    'action':'do_logout'
};
target_window.postMessage(JSON.stringify(pass_data), "http://www.example.net");

...然后在处理程序中:

function (event) {
    var pass_data = JSON.parse(event.data);
}

不过，请务必进行测试，如 JSON并非所有用户代理都提供对象，尤其是较旧的用户代理。有很多(很多很多)第三方库来支持 JSON，所以不要让缺乏完全采用吓跑你 - JSON 绝对是一个安全的“前进”标准。

如果我们可以直接传递那个对象不是更好吗？好吧，在 Firefox 6 ( source) 中，您传递给 postmessage 处理程序的数据可能是一个对象。该对象将被序列化，因此在这方面存在一些问题，但是:

var pass_data = {
    'name':'Chris',
    'id':54,
    'action':'do_logout'
};
target_window.postMessage(pass_data, "http://www.example.net");

好一点，嗯？不幸的是，当前版本的 IE 只能处理字符串。我找不到任何关于 postMessage future 计划的讨论。对于 IE 10。此外，IE 8/9 中有一个已知错误，它破坏了 postMessage对于框架以外的任何东西。 ( source)。

进入问题的特定方面 - 回调。除非您能够通过函数名传递回调，否则无法传递函数；没有适合您的匿名函数。这与数据实际传递给处理程序的方式有关。实际上，“不”支持将对象作为数据，在幕后浏览器正在将您传递的对象转换为字符串(序列化)。

说了这么多，你应该明白传递一个对象与使用 JSON 到 stringify 是完全一样的。传递之前的对象，仅在前一种情况下，浏览器正在执行自己的序列化(以及随后的反序列化)，而对于后一种路线，序列化/反序列化取决于您。

这里的要点:

postMessage 仍然有限的跨浏览器支持

新版本的符合标准的浏览器的趋势是允许除了字符串之外的对象

传递的对象将被序列化，因此不允许函数引用

“在野外”最广泛的支持是仅字符串数据，这意味着如果您想支持各种用户代理

，您必须坚持使用字符串并“打包”您的数据，如上所示。

Internet Explorer 将毁掉您制定的所有计划(包括家庭假期)

文档和引用资料

window.postMessage : https://developer.mozilla.org/en/DOM/window.postMessage

String.split : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split

IE 8/9 HTML5 支持说明:http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx

JSON.stringify : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.parse : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/parse