postmessage是html5新增的一个解决跨域的方法，其使用方法：首先在html里面创建一个iframe网页框架；然后创建一个接收消息的处理函数；接着给网页返回一段字符串即可。
postmessage用法
关于html5的PostMessage的用法总结
大家都知道，网页之间传递数据可以使用ajax请求来完成，今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢？首先，postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢？这里我把一个案例分享出来把。
相关视频教程推荐：html视频教程
看下面的代码：
test.html
|
1
|
|
1.html
|
1
|
<h1>test接收区</h1> |
首先，它的原理是这样的。我就拿我的案例代码来说吧。
1.html里面镶嵌了一个iframe网页 框架，他就是靠这里传输数据的，等1.html加载完成之后，他会主动发给test.html 谢霆锋，然后test.html收到之后，它里面有接收消息的处理函数，他收到消息之后，立马 ，给网页返回 一段字符串，然后把自己的背景改成红色。这样就达到了网页互动的效果，可惜的是，万恶的ie6.7不支持，兼容度不高。
注意：postMessage的写法，postMessage之前写的是你要通信的window对象（也就是你要向谁通信），此时的window.parent的权限仅限于此，不能在像同域似的，进行获取父级的DOM元素，否则浏览器会报错，提示你不能进行跨域访问，我们再来看postMessage中所接收的参数，第一个参数就是你要像另外一个窗口传递的数据（只能传字符串类型），第二个参数表示目标窗口的源，协议+主机+端口号，是为了安全考虑，如果设置为“*”，则表示可以传递给任意窗口。
上面是单页面交互的，下面给个双页面交互的。其实都是一样的，不过就是 两个页面都写了监听 发送事件。
test.html
|
1
|
<h1 class="header">page B</h1> <input type="text" id="inp" value="我想你"> <button οnclick="send()">send</button> |
1.html
|
1
|
<h1>test接收区</h1> <h1 class="header">page A</h1> <div class="mb20"> <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea> <button style="font-size:20px;" οnclick="send()">post message</button> </div> |
同样的，1.html是主页面。打开html，就可以实现交互了。
