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

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

iframe cors

iframe中的自动高度内容（CORS？）,iframe,height,cors,Iframe,Height,Cors,我和一个客户一起工作。他们的网页正在使用此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 framebor

我和一个客户一起工作。他们的网页正在使用此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>


.iframecontent
{
背景颜色：蓝色；
位置：相对位置；
身高：100%；
宽度：100%
}

因为内容的高度是动态的，所以我不能为客户端提供特定的高度——相反，我需要它来拉伸

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

这里提供了一个解决方案：-它在同一个域上工作，但对于跨域通话，它依赖于PostMessage，这是一种HTML5

我试过了，但没能使它起作用

我可能只是让客户端将框架设置为1500px，这样它就应该适合我在内容中选择的任何内容并使用它，但是有更好的方法吗？

你可以只设置

html，body{height:100%；}

然后你的

iframe{height:100%}

百分比高度直接取决于其父元素（块元素）的高度。ie:iframe是什么的100%？在这种情况下，它的父对象是主体。

您可以使用postMessage插件

它使您能够将消息从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

在父元素的头部分

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);
    }
});

基于这两个代码片段，您应该可以解决您的问题

我更新了您尝试的插件（），并添加了如何使用该插件进行跨域修复的教程。我希望有帮助