PostMessage具有多个函数或自定义回调 [英] PostMessage with multiple functions or custom callbacks

问题描述

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

如果我想在窗口之间有许多不同类型的交互，那么后处理可以处理什么呢？

这是否违背了postmessage应该做什么？ / p>

例如，如果我想要能够来回发送自定义回调等等？

解决方案

有多种方法可以将多部分消息传递到 postMessage 处理程序。第一个（而不是干净的方式）是使用分隔符，然后通过字符串传递你的数据。

假设我们想传递一个用户ID，操作和用户名。字符串如下所示：

54 | do_logout | chris

在 postMessage 处理程序中，传递的数据可以是 split （ | //developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/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）; 
  

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

 函数（event）{
 var pass_data = JSON.parse（event.data）; 
} 
  

请务必测试 JSON 对象不是在所有用户代理，特别是老的。有许多（许多，许多）第三方库支持JSON支持，所以不要让缺少完全采用吓唬你 - JSON是绝对安全的前进标准。

如果我们可以直接传递该对象，会不会更好？好吧，盯着Firefox 6（源），传递给postmessage处理程序的数据可能是一个对象。对象将被序列化，所以在那一面有一些关注，但是：

  var pass_data = {
' name'：'Chris'，
'id'：54，
'action'：'do_logout'
}; 
 target_window.postMessage（pass_data，http://www.example.net）; 
  

更好一点，不幸的是，当前版本的IE只处理字符串。我不能找到关于 postMessage 对IE 10的未来计划的任何讨论。此外，在IE 8/9中有一个已知的错误，打破了 postMessage 用于除框架之外的任何内容。 （ source ）。

进入问题的特定方面 - 回调。除非你能够通过函数名传递回调，没有办法传递函数;没有匿名函数给你。这与数据实际传递到处理程序的方式有关。在实践中，有不支持对象作为数据，在幕后，浏览器正在将您传递的对象转换为字符串（序列化）。

那么，你应该明白传递一个对象与传递之前使用JSON stringify 完全一样，只是在前一种情况下，浏览器正在做自己的序列化

这里的外带点：

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


• 符合标准的浏览器的新版本的趋势是允许对象通过到字符串


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


• 最广泛的支持 ，这意味着如果你想支持各种各样的用户代理，你必须坚持使用字符串和打包你的数据。


• Internet Explorer会破坏你所有的计划make（including family holidays）

文档和参考

• 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

So far I've only seen tutorials for postmessage where one window sends a single kind of message, and the other window interprets the message in only a single way.

What if I want to have many different kinds of interactions between windows, can postmessage handle that?

Is that going against the grain of what postmessage is supposed to do?

For example, what if I wanted to be able to send custom callbacks back and forth, etc?

解决方案

There are a couple of ways to pass a multi-part message on to a postMessage handler. The first (and less "clean" way) is to use a delimiter character, then pass your data through a string.

Let's say we wanted to pass a user ID, an action, and the users name. The string would look like this:

54|do_logout|chris

Within the postMessage handler, the passed data can be split (docs) on the | character, then each segment of the message can be used as needed.

Another route, instead of manually creating/splitting a string, is to use JSON (docs) to convert an object into a string on one side, and use JSON to convert back to an object in the handler.

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

... then in the handler:

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

Be sure to test, though, as the JSON object is not provided on all user agents, especially older ones. There are many (many, many) third-party libraries out there to shim JSON support, so don't let the lack of complete adoption scare you away - JSON is definitely a safe "moving forward" standard.

Wouldn't it be nicer if we could just pass that object straightaway? Well, staring in Firefox 6 (source), the data you pass to a postmessage handler may be an object. The object will be serialized, so there are some concerns on that front, but:

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

A little nicer, eh? Unfortunately, current versions of IE will only deal with strings. I was not able to find any discussion on future plans regarding postMessage for IE 10. Further, there is a known bug in IE 8/9 which breaks postMessage for anything other than frames. (source).

Getting in to a specific aspect of your question - callbacks. Unless you're able to pass the callback by function name, there isn't a way to pass a function; no anonymous functions for you. This is related to the way the data is actually passed on to the handler. In practice, there "is not" support for objects as data, behind the scenes the browser is turning your passed object into a string (serialization).

All that said, then, you should understand that passing an object is exactly the same as using JSON to stringify an object before passing, only in the former case the browser is doing its own serialization (and subsequent unserialization), whereas with the latter route it is up to you to serialize/unserialize.

The take-away points here:

• postMessage still has limited cross-browser support
• The trend for newer versions of standards-compliant browsers is to allow passage of objects in addition to strings
• The passed object will be serialized, so no function references allowed
• The widest support "in the wild" is for string-only data, which means you'll have to stick with strings and "pack" your data as demonstrated above if you want to support a wide variety of user agents
• Internet Explorer will ruin every plan you ever make (including family holidays)

Documentation and References

• 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 support notes: 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

这篇关于PostMessage具有多个函数或自定义回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！