使用postMessage跨域iframe resizer

我已阅读所有跨域iframe帖子（我要感谢你们所有人！）和其他地方。使用postMessage跨域iframe resizer

在Firefox 5及更高版本中，postMessage脚本在cross-domain iframe resizer?处理得非常漂亮。每次在iframe中单击页面时，它都会调整iframe的大小。

但它并没有在我的计算机上的IE（7 8或9）中调整大小。我检查了安全设置，并检查IE中是否存在跨域访问权限。

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

2011-09-23 Peter

这是一个从thomax一个伟大的剧本 - 它也适用于这样你就可以使用iframe的移动 - iPhone和Android

对于IE7和IE8，你必须使用的，而不是window.addEventListener 它window.attachEvent还应该的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>

来源

2012-05-25 18:47:55 Peter

可以使用本Alman的实施做同样的服务器上。以下是跨域通信的示例，其中包括iframe调整大小的示例。

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

根据该文件，它工作在Internet Explorer 6-8，Firefox 3中，Safari浏览器3-4，Chrome浏览器，Opera 9中

来源

2012-09-10 09:34:55

使用彼得的代码和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, '*');

来源

2013-08-02 03:22:11 deadbeef404

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

使用postMessage跨域iframe resizer

回答

相关问题