postMessage

简述用postMessage解决iframe自适应高度问题;

postMassage:

postMessage可以使不同域下的页面实现相互通信

sending message

window.postMessage(message,targetOrigin),window为信息接收方的所在的window对象,比如要想A页面向B页面发送信息,则应在A页面执行window_B.postMessage(),以下几种方式获取window:

  • var targetWindow = window.open();
  • var targetWindow = frames[n].contentWindow;
  • 如果是iframe向父页面传信息则是window.top

message为传递的信息,可以为几乎任意类型的值,因为该参数在传递时被自动序列化,且为比json更彻底的序列化,所以各种类型值都可以。

1
2
3
4
5
6
function sendMessage(e) {
// Prevent any default browser behaviour.
e.preventDefault();
receiverWindow.postMessage('Hello Treehouse!', 'http://demos.matt-west.com');
}

targetOrigin为信息接收方的url,接收方的 protocol,port,hostname必须同时与targetOrigin保持一致才可以接收到该信息。*可以匹配任意url但是出去安全考虑不推荐使用。

listener

消息接收方要想得到消息需要监听message事件,监听到的messageEvent对象常用属性为data,origin,source

1
2
3
4
5
6
7
8
9
10
11
12
if(window.addEventListenr)
window.addEventListener('message', function(e) {
var message = e.data, //信息
origin = e.origin, //信息发送的源
source = e.source; //信息发送方的window对象
})else{
//for IE低版本
window.attachEvent("onmessage",function(){
var message = e.data;
})
}

adaptive

回到开始的问题,则只要在onload中获取到当前文档的高度,然后作为message传递给父页面就可以了,不在onload中获取到的高度不一定准确。

籽料: