js-iframe-同源策略-addEventListener-postMessage-父子框架

// 父页面脚本
 
// 监听子页面发送的消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://child.example.com') return; // 确保消息来源可信
  if (event.data.type === 'resize') {
    // 根据子页面发送的数据调整父页面的布局
    document.body.style.width = event.data.width + 'px';
    document.body.style.height = event.data.height + 'px';
  }
});
 
// 向子页面发送消息
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
  iframe.contentWindow.postMessage({ type: 'getDimensions' }, 'http://child.example.com');
};
 
// 子页面脚本
 
// 监听父页面发送的消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://parent.example.com') return; // 确保消息来源可信
  if (event.data.type === 'getDimensions') {
    // 计算需要发送给父页面的数据
    var dimensions = { type: 'resize', width: document.body.scrollWidth, height: document.body.scrollHeight };
    // 发送尺寸数据给父页面
    window.parent.postMessage(dimensions, 'http://parent.example.com');
  }
});

这个示例展示了如何在遵守同源策略的前提下，通过postMessage方法实现跨文档（父子）通信。父页面监听子页面发送的消息，并根据接收到的数据调整自身布局。子页面也监听父页面发送的消息，并在需要时向父页面发送数据。这里使用了event.origin来确保消息的来源是安全可信的，避免了潜在的安全问题。