Question

我正在与客户合作。他们的网页正在使用此DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我需要向其网站上的网页投放内容。我的内容看起来像这样

    <div style="height:1000px">
    <iframe frameborder="0" src="..." width="550" height="220"></iframe>
    <br/>
    <br/>
    <iframe frameborder="0" src="..." width="550" height="220"></iframe>
    </div>

我可以将内容放在客户页面上，给它们几行css，当前和iframe：

<style>
.iframecontent
{
    background-color:blue;
    position: relative;
height: 100%;
width: 100%
}
</style>

<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>

由于内容的高度是动态的，我无法为客户端提供特定的高度 - 而是我需要它来拉伸。

我看过很多帖子，但我仍然不确定最好的方法。可能是CORS？还有别的吗？

以下是提供的一个解决方案：http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - 它适用于同一个域，但对于跨域通话，它依赖于PostMessage，这是一个HTML 5的东西。

我已经尝试了http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/，但无法让它发挥作用。

我可能只是让客户端将帧设置为1500px，以便它适合我在内容中选择的任何内容并完成它，但是有更好的方法吗？

Answer 1

您可以设置html,body{height:100%;}然后设置iframe{height:100%}吗？

百分比高度直接取决于它的父级高度（块元素的高度）。即：iframe是100％的什么？在这种情况下，它的父亲就是身体。

Answer 2

您可以使用postMessage插件http://benalman.com/projects/jquery-postmessage-plugin/

它使您能够将iframe内部的消息发布到父元素。结合 setInterval javascript函数，您可以将当前所需的大小发送到父元素。

iframe内部

var currentIframeSize = 0; 
window.setInterval(function() {
    var size = $('body').outerHeight(true);
    //just post, if the size has changed
    if ( currentIframeSize != size ){
        currentIframeSize = size;
        $.postMessage({if_height : size}, source_url, parent);
    }
}, 1000); //do that every second

在父元素的head部分

id = "theIdOfYourIframe";
$.receiveMessage(function(e){
    var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
    if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {  
        current_height = rec_height;
        $('#' + id).height(rec_height);
    }
});

基于这两个片段，您应该解决问题

Answer 3

我更新了您尝试过的插件（http://sly777.github.com/Iframe-Height-Jquery-Plugin/），并添加了教程如何使用此插件进行跨域修复。我希望它有所帮助。

iframe中的自动高度内容（CORS？）

3 个答案: