3

我正在和一个客户一起工作。他们的网页正在使用这个 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/但无法让它工作。

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

4

3 回答 3

0

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

于 2013-02-20T22:18:12.097 回答
0

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

在父元素的头部

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

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

于 2012-11-18T13:16:02.147 回答
0

你能设置html,body{height:100%;}然后你的iframe{height:100%}吗？

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

于 2012-11-08T20:42:02.293 回答