3、设置消息处理
window.addEventListener('message', e => {
if (e.data.type === 1) {
$('#shopIframeId').width(e.data.data.width + 50)
$('#shopIframeId').height(e.data.data.height + 50)
}
});我再index.html 添加了message监听，如果有消息被发送过来，则会触发处理函数，更新iframe标签的宽高。
处理函数传入一个参数e，e是一个消息对象，包含如下重要属性:
data:
从其他 window 中传递过来的对象。
origin：
调用
postMessage 时消息发送方窗口的origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “
https://example.org (隐含端口
443 )”、“
http://example.net (隐含端口
80 )”、“
http://example.com:8080 ”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。source：
对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
小结
在消息传输中，我使用type属性，在iframe中传输不同的message.type和message.data，父window中就可以根据不同的message.type做出相应的处理。
譬如message.type如果等于2，则可以设置弹出一个带弹层的alert，内容从message.data获取
这样就可以解决，在iframe中弹层不能覆盖到外部的问题。
