如何自动调整iFrame的大小?(复制)

Possible Duplicate:
Resizing an iframe based on content

可能的重复:基于内容调整iframe的大小

I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.

我正在加载一个iFrame，并希望父框架根据iFrame内容的高度自动更改高度。

To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.

简单地说，所有的页面都属于同一个域，所以我不应该遇到跨站点脚本问题。

12 个解决方案

#1

On any other element, I would use the scrollHeight of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.

对于任何其他元素，我将使用DOM对象的滚动高度并相应地设置高度。我不知道这是否适用于iframe(因为它们对所有事情都有点古怪)，但它确实值得一试。

Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the offsetHeight:

编辑:在环顾四周后，大家一致认为应该使用鼠标从iframe内部设置高度:

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

And attach that to run with the iframe-body's onLoad event.

并将其附加到iframe-body的onLoad事件中运行。

#2

Try:

试一试:

jquery-iframe-auto-height
jquery-iframe-auto-height
iframe-resizer
iframe-resizer

#3

I just happened to come by your question and i have a solution. But its in jquery. Its too simple.

我碰巧遇到你的问题，我有一个解决办法。但其在jquery。它太简单了。

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

There you go!

你走吧!

Cheers! :)

干杯!:)

Edit: If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful.

编辑:如果您有一个基于iframe方法而不是div方法的富文本编辑器，并且希望它扩展每个新行，那么这段代码将完成所需的工作。

#4

Here is a dead simple solution that works on every browser and with cross domains:

这里有一个非常简单的解决方案，适用于所有浏览器和跨领域:

First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.

首先，它的概念是，如果包含iframe的html页面被设置为100%的高度，而iframe的样式是使用css设置为100%的高度，那么css将自动为所有内容设置大小。

Here is the code:

这是代码:

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>

#5

This solution worked best for me. It uses jQuery and the iframe's ".load" event.

这个解决方案对我最有效。它使用jQuery和iframe's。负载”事件。

#6

In IE 5.5+, you can use the contentWindow property:

在IE 5.5+中，您可以使用contentWindow属性:

iframe.height = iframe.contentWindow.document.scrollHeight;

In Netscape 6 (assuming firefox as well), contentDocument property:

在Netscape 6(假设firefox也是)中，contentDocument属性:

iframe.height = iframe.contentDocument.scrollHeight

#7

I found the solution by @ShripadK most helpful, but it does not work, if there is more than one iframe. My fix is:

我发现@ShripadK的解决方案最有用，但是如果不止一个iframe，它就不起作用了。我的解决是:

function autoResizeIFrame() {
  $('iframe').height(
    function() {
      return $(this).contents().find('body').height() + 20;
    }
  )
}

$('iframe').contents().find('body').css(
  {"min-height": "100", "overflow" : "hidden"});

setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);

$('iframe').height($('iframe').contents().find('body').height() + 20) would set the height of every frame to the same value, namely the height of the content of the first frame. So I am using jquery's height() with a function instead of a value. That way the individual heights are calculated
$('iframe').height($('iframe').contents().find('body').height() + 20)将每个帧的高度设置为相同的值，即第一帧内容的高度。因此，我使用jquery的height()函数而不是值。这样就可以计算出个人身高
+ 20 is a hack to work around iframe scrollbar problems. The number must be bigger than the size of a scrollbar. The hack can probably be avoided but disabling the scrollbars for the iframe.
+ 20是解决iframe滚动条问题的一种技巧。数字必须大于滚动条的大小。可以避免这种攻击，但可以禁用iframe的滚动条。
I use setTimeout instead of setInterval(..., 1) to reduce CPU load in my case
我使用setTimeout代替setInterval(…， 1)在我的情况下减少CPU负载

#8

Oli has a solution that will work for me. For the record, the page inside my iFrame is rendered by javascript, so I'll need an infinitesimal delay before reporting back the offsetHeight. It looks like something along these lines:

奥利有一个对我有用的解决方案。对于记录，我的iFrame中的页面是由javascript呈现的，因此在报告offsetHeight之前，我需要一个极小的延迟。它看起来是这样的:


    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }

#9

Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:

事实上，帕特里克的代码对我也适用。正确的做法应该是:

Note: there's a bit of jquery ahead:

注意:前面有一些jquery:


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}

#10

This is the easiest method i have found using prototype:

这是我用prototype找到的最简单的方法:

Main.html:

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html:

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

This seems to work (so far) in all the major browsers.

到目前为止，这似乎在所有主流浏览器中都有效。

#11

My workaround is to set the iframe the height/width well over any anticipated source page size in CSS & the background property to transparent.

我的解决方案是将iframe的高度/宽度设置在CSS中的任何预期源页面大小之上，并将后台属性设置为透明。

In the iframe set allow-transparency to true and scrolling to no.

在iframe设置中，允许透明度为true，滚动为no。

The only thing visible will be whatever source file you use. It works in IE8, Firefox 3, & Safari.

唯一可见的是您使用的源文件。它适用于IE8、Firefox 3和Safari。

#12

My solution, (using jquery):

我的解决方案,使用jquery():

<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>  
<script type="text/javascript">
    $(function () {

        $('.tabFrame').load(function () {
            var iframeContentWindow = this.contentWindow;
            var height = iframeContentWindow.$(document).height();
            this.style.height = height + 'px';
        });
    });
</script>

#1