Question

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

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

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

postMessage在IE中不起作用吗？ - 或者还有其他需要添加的东西吗？感谢

Answer 1

这是一个来自thomax的精彩剧本 - 它也适用于你可以在手机上使用iframe - iphone和android

对于IE7和IE8，你必须使用window.attachEvent而不是window.addEventListener 它也应该是onmessage而不是消息（见下文）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>

Answer 2

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

Answer 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, '*');

Answer 4

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

使用postMessage的跨域iframe resizer

4 个答案: