使用 postMessage 跨域 iframe 调整大小答案

【问题标题】：Cross domain iframe resizer using postMessage使用 postMessage 跨域 iframe 调整大小
【发布时间】：2011-11-23 20:13:34
【问题描述】：

我已经阅读了所有跨域 iframe 帖子（感谢你们所有人！）和其他地方。

cross-domain iframe resizer? 的 postMessage 脚本在 Firefox 5 及更高版本中运行良好。每次在 iframe 中完美点击页面时，它都会调整 iframe 的大小。

但它在我电脑上的 IE（7 8 或 9）中根本没有调整大小。我检查了安全设置，在 IE 中跨域访问的设置被检查为启用。

postMessage 在 IE 中不起作用吗？ - 或者还有什么需要补充的吗？谢谢

【问题讨论】：

标签： cross-domain postmessage

【解决方案1】：

这是来自 thomax 的一个很棒的脚本 - 它也适用，因此您可以在移动设备上使用 iframe - iphone 和 android

对于 IE7 和 IE8，你必须使用 window.attachEvent 而不是 window.addEventListener 它也应该是 onmessage 而不是 message（见下文） ps 您还需要在服务器上执行相同的操作，内容发布其大小

<script type="text/javascript">
if (window.addEventListener)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
else if (window.attachEvent)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.attachEvent('onmessage', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
</script>

【讨论】：

【解决方案2】：

查看了很多不同的解决方案后，我最终编写了一个简单的 jQuery 插件来考虑许多不同的用例。因为我需要一个在门户页面上支持多个用户生成的 iFrame 的解决方案，支持浏览器调整大小并且可以处理 iFrame 之后加载的主机页面 JavaScript。我还添加了对调整宽度和回调函数的支持，并允许覆盖 body.margin，因为您可能希望将此设置为零。

https://github.com/davidjbradshaw/iframe-resizer

宿主页面使用 jQuery，iframe 代码只是一点自包含的 JavaScript，因此它是其他人页面的好客。

然后在主机页面上初始化 jQuery，并具有以下可用选项。有关这些功能的更多详细信息，请访问 GitHub 页面。

$('iframe').iFrameSizer({
    log: false,
    contentWindowBodyMargin:8,
    doHeight:true,
    doWidth:false,
    enablePublicMethods:false,
    interval:33,
    autoResize: true,
    callback:function(messageData){
        $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
                            ' <b>Height:</b> ' + messageData.height + 
                            ' <b>Width:</b> ' + messageData.width +
                            ' <b>Event type:</b> ' + messageData.type);
    }
});

如果您设置了 enablePublicMethods，它可以让您在 iframe 中访问以手动设置 iFrame 大小，甚至从主机页面中删除 iframe。

【讨论】：

【解决方案3】：

使用 Peter 的代码和 here 的一些想法，您可以将兼容性与可执行代码分开，并添加一些跨站点验证。

<script type="text/javascript">
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
    if (e.origin !== 'http://yourdomain.com' || isNaN(e.data)) return;
    document.getElementById('iframe_id_goes_here').style.height = e.data + 'px';
  }, false);
</script>

此外，为了完整起见，您可以在 iframe 中使用以下代码来触发调整大小。

parent.postMessage(document.body.offsetHeight, '*');

【讨论】：

就我而言，'*' 是解决问题的关键！我没有将其从 localhost 更改为 whatever-it-is.com，而是将 * 用于开发目的。咳咳！

【解决方案4】：

您可以使用 Ben Alman 的实现。这是一个跨域通信的例子，包括一个 iframe resize 的例子。

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

根据文档，它适用于 Internet Explorer 6-8、Firefox 3、Safari 3-4、Chrome、Opera 9。

【讨论】：