<head>
<meta charset="utf-8" />
<title>css study</title>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/JavaScript">
var data = {
el: $('.box'),
height: $('.box').outerHeight(),
width: $('.box').outerWidth(),
parent: window.parent
}
$('.box').on('click', function () {
// 更新数据
if (data.width < 1250) {
data.width += 50
}
data.height += 50
// 更新视图
data.el.width(data.width)
data.el.height(data.height)
// 通知父window 自身高度变更
data.parent.postMessage({
type: 1,
data: {
width: data.width,
height: data.height
}
}, '*')
})
</script>
</html>
正题
我们知道，把大象装进去需要四步。
使用postMessage API发送消息比装大象要少一步，只需要三步就行。
分别是：
1、找到发送对象
2、发送消息
3、设置消息处理
接下来，我们用上面的例子，一一来说。
1、找到发送目标对象
使用window.parent 就可以获取引入自身文档的父window对象。
var data = {
el: $('.box'),
height: $('.box').outerHeight(),
width: $('.box').outerWidth(),
parent: window.parent
}我在这一步中还初始化了鉴定dom，监听dom的height和width，核心是用window.parent获取 index.html文件的window对象
2、在iframe中发送消息
$('.box').on('click', function () {
// 更新数据
if (data.width < 1250) {
data.width += 50
}
data.height += 50
// 更新视图
data.el.width(data.width)
data.el.height(data.height)
// 通知父window 自身高度变更
data.parent.postMessage({
type: 1,
data: {
width: data.width,
height: data.height
}
}, '*')
})给目标div挂在一个单机事件，每次点击时，都会增加50xp的宽高（如果宽度大于等于1250则宽度不增加）。
然后使用el.postMessage(message, targetOrigin)方法发送消息。
el:
el是其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message：
message参数是要传输的数据消息体。
targetOrigin：
targetOrigin参数通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。
