跨 html 消息传递

跨html进行消息传递 靠的是window 对象新增的一个方法 和一个对象监听器属性

该方法是 targetWindow.postMessage(message , targetOrigin);

此方法向 targetWindow 窗口中的 html 发送消息，所以应先获取这个窗口。message 为带发送的数据，而 targetOrigin 表示发送源的域名。

这个对象监听器为    window.onmessage 这个属性是一个形如  function(event) { } 的函数。

这个 onmessage 所指定的函数的参数  为 MessageEvent 对象含有五个只读属性

1）data  表示发送来的消息的数据，这个数据可以是各种格式，比如文本，还可以是 json格式。

2）origin 属性返回发送此消息的源域名

3）lastEventId 该消息的 ID，即唯一标识

4）source 返回发送该消息的窗口

一些问题：

获取window窗口对象一般有两种方式：

1.可以新打开一个页面

// 打开一个新窗口var targetWin = window.open('http://localhost:8888/target/target.html','_blank','width=400,height=300');    //①// 等该窗口装载完成时，向该窗口发送消息targetWin.onload = function (){ // 向http://localhost:8888/target发送消息targetWin.postMessage(document.getElementById("msg").value, "http://localhost:8888/target");    //②}

2.可以是从消息MessageEvent中通过 source 属性获取此窗口

window.onmessage = function(ev) {// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）if (ev.origin != "http://localhost:8888") {return;}document.body.innerHTML = (ev.origin + "传来了消息:" + ev.data);// 向发送该消息的页面回传消息ev.source.postMessage("回传消息，这里是" + this.location, ev.origin);    //①};

发送和接受json数据

发送json数据

// 等该窗口装载完成时，向该窗口发送消息targetWin.onload = function (){ var data = [{name : '疯狂Java讲义',price : 109,author : 'yeeku'},{name : '疯狂Android讲义',price : 89,author : 'yeeku'},{name : '轻量级Java EE企业应用实战',price : 99,author : 'yeeku'}];// 向http://localhost:8888/target发送消息targetWin.postMessage(data, "http://localhost:8888/target");    //①}

接收json数据

window.onmessage = function(ev) {// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）if (ev.origin != "http://localhost:8888") {return;}srcWin = ev.source;srcOrigin = ev.origin;// 接收到其他文档发送过来的消息var books = ev.data;var bookTb = document.getElementById("bookTb");for(var i = 0 ; i < books.length ; i++){var row = bookTb.insertRow(i);row.insertCell(0).innerHTML = books[i].name;row.insertCell(1).innerHTML = books[i].price;row.insertCell(2).innerHTML = books[i].author;row.insertCell(3).innerHTML = "<input name='choose' type='radio'"+ " onclick='chooseItem(this);'/>";}};

这个与ajax 处理返回json数据的函数是不同的，没有将字符串转化为json对象的那一步。