在HTML中，开发人员经常需要解决跨域、跨窗口的消息传输问题。此时，他们需要应用PostMessage函数将消息放入消息队列进行处理。如何使用PostMessage函数？请看下文。

平时做WEB开发的时候，除了客户端和服务器端的价值传递之外，还有几个关于消息传递的常见问题。

1.页面及其打开的新窗口的数据传输；

2.多个窗口之间的消息传输；

3.页面和嵌套iframe之间的消息传输；

4.跨域数据传输的上述三个问题。

　　HTML5应用PostMessage函数解决跨域、跨窗口消息传递：

　　postMessage()

这些问题有一些解决方案，但是HTML5引入的消息API可以更方便、有效、安全地解决这些问题。PostMessage()方法允许不同来源的脚本以有限的方式异步通信，可以实现跨文本文件、多窗口、跨域的消息传输。

　　postMessage(data,origin)方法接受两个参数

1.data:至于要传输的数据，html5规范提到参数可以是任何基本类型的JavaScript或可复制的对象。但是，并不是所有的浏览器都能做到这一点，有些浏览器只能处理字符串参数。因此，我们在传输参数时需要通过JSON.stringify()方法序列化对象参数。在较低版本的IE中引用js 2 . js可以达到类似的效果。

2.指示目标窗口来源的origin:字符串参数。协议主机[URL]的端口号将被忽略，因此无需写入URL。该参数是出于安全原因。postMessage()方法只会将消息传递到指定的窗口。当然，如果您愿意，可以将参数设置为' * '，它可以传递给任何窗口。如果要指定与当前窗口相同的源，请将其设置为“/”。

http://test.com/index.html

01div style=' width:200pxfloat:left右边距right:200pxborder:solid 1px # 333'

02div id='color'Frame Color/div

03/div

04div

05 iframe id=' child ' src=' http://lslib.com/lslib . html '/iframe

06/div

复制代码

div style=' width:200pxfloat:left右边距right:200pxborder:solid 1px # 333'

div id='color '框架颜色/div

/div

差异

iframe id=' child ' src=' http://LSLiB.com/LSLiB . html '/iframe

/div