5

我已经在这里阅读了所有跨域 iframe 帖子（感谢大家！）和其他地方。

跨域 iframe 调整大小的 postMessage 脚本？ 在 Firefox 5 及更高版本中运行良好。每次在 iframe 中完美地单击页面时，它都会调整 iframe 的大小。

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

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

4

4 回答 4

4

这是 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>
于 2012-05-25T18:47:55.743 回答
2

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

<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, '*');
于 2013-08-02T03:22:11.660 回答
1

在查看了很多不同的解决方案之后，我最终编写了一个简单的 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。

于 2014-02-02T14:53:25.457 回答
1

您可以使用 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。

于 2012-09-10T09:34:55.913 回答