blocks|key|361400|text|对于任何其他元素，我将使用DOM对象的scrollHeight并相应地设置高度。我不知道这是否适用于iframe+(因为它们对所有东西都有点古怪)，但它肯定值得一试。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|361401|编辑:在环顾四周后，流行的共识是使用offsetHeight在iframe中设置高度|361402|function+setHeight()+{
++++parent.document.getElementById('the-iframe-id').style.height+=+document['body'].offsetHeight+%2B+'px';
}|code-block|syntax|javascript|361403|并将其附加到iframe-body的onLoad事件中运行。|361404|entityMap^0|J|C|0|I|C|0|0|I|6|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>On any other element, I would use the <code>scrollHeight</code> 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.</p>

<p>Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the <code>offsetHeight</code>:</p>

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

<p>And attach that to run with the iframe-body's <code>onLoad</code> event.</p>


blocks|key|359006|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359007|359008|jquery-iframe-auto-height|unordered-list-item|offset|length|359009|iframe-resizer|359010|359011|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/house9/jquery-iframe-auto-height|1|https://github.com/davidjbradshaw/iframe-resizer^0|0|0|0|P|0|0|0|E|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|W|8|@]|9|@$F|X|G|Y|1|Z]]|A|$]]|$1|H|3|I|5|E|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|J|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

<p>Try:</p>

<ul>
<li><a href="https://github.com/house9/jquery-iframe-auto-height" rel="nofollow noreferrer">jquery-iframe-auto-height</a></li>
<li><a href="https://github.com/davidjbradshaw/iframe-resizer" rel="nofollow noreferrer">iframe-resizer</a></li>
</ul>


blocks|key|3145661|text|我碰巧遇到你的问题，我有一个解决方案。但它是在jquery中。这太简单了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3145662|$('iframe').contents().find('body').css({"min-height":+"100",+"overflow"+:+"hidden"});
setInterval(+"$('iframe').height($('iframe').contents().find('body').height()+%2B+20)",+1+);|code-block|syntax|javascript|3145663|就是这样！|3145664|干杯！:)|3145665|编辑：如果你有一个基于iframe方法而不是div方法的富文本编辑器，并希望它展开每一个新行，那么这段代码就可以完成所需的工作。|offset|length|style|BOLD|3145666|entityMap^0|0|0|0|0|0|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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

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

<p>There you go!</p>

<p>Cheers! :)</p>

<p><strong>Edit:</strong> 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.</p>


blocks|key|3145681|text|这是一个非常简单的解决方案，适用于每种浏览器和跨域：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3145682|首先，如果包含iframe的html页面的高度设置为100%25，并且iframe的样式使用css设置为100%25的高度，那么css将自动调整所有内容的大小以适应这一概念。|3145683|代码如下：|3145684|<head>
<style+type="text/css">+
html+{height:100%25}
body+{
margin:0;
height:100%25;
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%25;height:100%25"></iframe>
</body>|code-block|syntax|javascript|3145685|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<p>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.</p>

<p>Here is the code:</p>

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

&lt;body&gt;
&lt;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%"&gt;&lt;/iframe&gt;
&lt;/body&gt;
</code></pre>


blocks|key|3145652|text|这个solution最适合我了。它使用jQuery和iframe的".load“事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3145653|entityMap|0|LINK|mutability|MUTABLE|url|http://sonspring.com/journal/jquery-iframe-sizing^0|2|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>This <a href="http://sonspring.com/journal/jquery-iframe-sizing" rel="nofollow noreferrer">solution</a> worked best for me.  It uses jQuery and the iframe's ".load" event.</p>


blocks|key|3358233|text|在IE+5.5%2B中，可以使用contentWindow属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3358234|iframe.height+=+iframe.contentWindow.document.scrollHeight;|code-block|syntax|javascript|3358235|在Netscape+6中(假设火狐也是)，contentDocument属性：|3358236|iframe.height+=+iframe.contentDocument.scrollHeight|3358237|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In IE 5.5+, you can use the contentWindow property:</p>

<pre><code>iframe.height = iframe.contentWindow.document.scrollHeight;
</code></pre>

<p>In Netscape 6 (assuming firefox as well), contentDocument property:</p>

<pre><code>iframe.height = iframe.contentDocument.scrollHeight
</code></pre>


blocks|key|361559|text|我发现@ShripadK的解决方案最有帮助，但如果有多个iframe，它就不起作用。我的解决办法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|361560|function+autoResizeIFrame()+{
++$('iframe').height(
++++function()+{
++++++return+$(this).contents().find('body').height()+%2B+20;
++++}
++)
}

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

setTimeout(autoResizeIFrame,+2000);
setTimeout(autoResizeIFrame,+10000);|code-block|syntax|javascript|361561|361562|$('iframe').height($('iframe').contents().find('body').height()+%2B+20)会将每个帧的高度设置为相同的值，即第一帧内容的高度。所以我使用jquery的height()作为函数，而不是值。这样的话，个人的高度是calculated|unordered-list-item|offset|length|style|CODE|361563|%2B+20是一个解决iframe滚动条问题的黑客。该数字必须大于滚动条的大小。|361564|我使用setTimeout而不是setInterval(...,+1)来减少CPU负载在我的例子中是|361565|。|361566|entityMap^0|0|0|0|0|1X|2Z|8|0|0|4|0|3|A|G|J|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@$K|10|L|11|M|N]|$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@$K|15|L|16|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|17|8|@$K|18|L|19|M|N]|$K|1A|L|1B|M|N]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$]]

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

<pre><code>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);
</code></pre>

<ul>
<li><code>$('iframe').height($('iframe').contents().find('body').height() + 20)</code> 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 <code>height()</code> with a function instead of a value. That way the individual
heights are calculated</li>
<li><code>+ 20</code> 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.</li>
<li>I use <code>setTimeout</code> instead of <code>setInterval(..., 1)</code> to reduce CPU load in my case</li>
</ul>


blocks|key|3145746|text|我的解决方案(使用jquery)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3145747|<iframe+id="Iframe1"+class="tabFrame"+width="100%25"+height="100%25"+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+%2B+'px';
++++++++});
++++});
</script>|code-block|syntax|javascript|3145748|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>My solution, (using jquery):</p>

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

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


blocks|key|356760|text|Oli有一个适合我的解决方案。根据记录，我的iFrame中的页面是由javascript呈现的，所以在报告offsetHeight之前，我需要一个无限小的延迟。它看起来像是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356761|++++$(document).ready(function(){
++++++++setTimeout(setHeight);
++++});

++++function+setHeight()+{
++++++++alert(document['body'].offsetHeight);+++
++++}|code-block|syntax|javascript|356762|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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:</p>

<pre><code>
    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
</code></pre>


blocks|key|361538|text|我的解决方法是将iframe的高度/宽度设置为远远超过CSS中任何预期的源页面大小&将background属性设置为transparent。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|361539|在iframe中，将allow-transparency设置为true，将scrolling设置为no。|361540|唯一可见的将是您使用的任何源文件。它可以在IE8，Firefox3和Safari中运行。|361541|entityMap^0|17|A|1M|B|0|A|I|V|4|11|9|1D|2|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$]]

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

<p>In the iframe set <code>allow-transparency</code> to <code>true</code> and <code>scrolling</code> to <code>no</code>.</p>

<p>The only thing visible will be whatever source file you use. It works in IE8, Firefox 3, &amp; Safari.</p>


blocks|key|361543|text|这是我使用prototype找到的最简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|361544|Main.html：|361545|<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+%2B+"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>|code-block|syntax|javascript|361546|content.html：|361547|<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>|361548|到目前为止，这似乎在所有主流浏览器中都有效。|361549|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>This is the easiest method i have found using prototype:</p>

<p>Main.html:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;


&lt;script src="prototype.js"&gt;&lt;/script&gt;

&lt;script&gt;
    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";
    }
&lt;/script&gt;

&lt;/head&gt;

&lt;body onload="init()"&gt;


&lt;iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"&gt;&lt;/iframe&gt;

&lt;br&gt;
this is the next line

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>content.html:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script src="prototype.js"&gt;&lt;/script&gt;


&lt;style&gt;
body {
    margin: 0px;
    padding: 0px;
}
&lt;/style&gt;


&lt;/head&gt;

&lt;body&gt;


&lt;div id="iframe_content" style="max-height:200px;"&gt;
Sub content&lt;br&gt;
Sub content&lt;br&gt;
...
...
...
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This seems to work (so far) in all the major browsers.</p>


blocks|key|3358251|text|实际上--Patrick的代码对我来说也是有效的。正确的方法应该是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3358252|注意:前面还有一些jquery：|3358253|if+($.browser.msie+==+false)+{
++++var+h+=+(document.getElementById("iframeID").contentDocument.body.offsetHeight);
}+else+{
++++var+h+=+(document.getElementById("iframeID").Document.body.scrollHeight);
}|code-block|syntax|javascript|3358254|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<p>Note: there's a bit of jquery ahead:</p>

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


<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="https://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content">Resizing an iframe based on content</a>  </p>
</blockquote>



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

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


How to auto-size an iFrame?

 可能重复：我正在加载一个iFrame，并希望父级根据iFrame内容的高度自动更改高度。简单地说，所有页面都属于同一个域，所以我不应该遇到跨站点脚本问题。

问如何自动调整iFrame的大小？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自动调整iFrame的大小？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自动调整iFrame的大小？
EN