Author: 刘老师(Aaron Lau) 武汉长乐教育，武汉PHP培训课程，版权所有，转载请注明！

HTML5中使用postMessage跨域发送消息

HTML5中, 对跨域请求有了新的支持, 主要用在iframe或新开窗口中, 我个人暂时认为用途不是太大. 下面还是介绍一下postMessage的相关知识.

本课摘要

1. 发送信息
2. 收取信息
3. 完整实例

1. 发送信息

方法原型

otherWindow.postMessage(message, targetOrigin);

otherWindow: 指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口

参数说明：

1. message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)

2. targetOrigin: 是限定消息接收范围，不限制请使用 '*'

例子:

var email = "canonpd@163.com";
var origin = "http://127.0.0.1:3000/index.html";

window.parent.postMessage(email, origin);

2. 收取信息

//jQuery方法
$(function(){
    $(window).bind("message",function(event){
      console.log(event);
      console.log(event.originalEvent.data);
    });
});

//javascript原生方法
window.addEventListener( "message",
    function(e){
        console.log(e.data);
    },false);

3. 完整实例

点击查看

实例中使用了ruby做服务器, 进入两个目录, 分别运行

ruby server.rb

端口号, 请自行修改. 然后请访问http://127.0.0.1:3000, 查看示例.