blocks|key|913260|text|好了，我终于找到了一个好的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913261|$('iframe').load(function()+{
++++this.style.height+=
++++this.contentWindow.document.body.offsetHeight+%2B+'px';
});|code-block|syntax|javascript|913262|因为一些浏览器(旧的Safari和Opera)在CSS呈现之前报告onload已经完成，所以您需要设置一个微超时和消隐，并重新分配iframe的src。|913263|$('iframe').load(function()+{
++++setTimeout(iResize,+50);
++++//+Safari+and+Opera+need+a+kick-start.
++++var+iSource+=+document.getElementById('your-iframe-id').src;
++++document.getElementById('your-iframe-id').src+=+'';
++++document.getElementById('your-iframe-id').src+=+iSource;
});
function+iResize()+{
++++document.getElementById('your-iframe-id').style.height+=+
++++document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight+%2B+'px';
}|913264|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|$]]

ok I finally found a good solution:

<pre><code>$('iframe').load(function() {
 this.style.height =
 this.contentWindow.document.body.offsetHeight + 'px';
});
</code></pre>

Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src. 

<pre><code>$('iframe').load(function() {
 setTimeout(iResize, 50);
 // Safari and Opera need a kick-start.
 var iSource = document.getElementById('your-iframe-id').src;
 document.getElementById('your-iframe-id').src = '';
 document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
 document.getElementById('your-iframe-id').style.height = 
 document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
</code></pre>

blocks|key|913305|text|你不需要在iframe中使用jquery来做这件事，但是我使用它是因为代码要简单得多……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913306|将此文件放入iframe内的文档中。|913307|$(document).ready(function()+{
++parent.set_size(this.body.offsetHeight+%2B+5+%2B+"px");++
});|code-block|syntax|javascript|913308|在上面添加了五个，以消除小窗口上的滚动条，它的大小永远不会完美。|913309|在您的父级文档中。|913310|function+set_size(ht)
{
$("#iframeId").css('height',ht);
}|913311|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|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You don't need jquery inside the iframe to do this, but I use it cause the code is so much simpler...

Put this in the document inside your iframe.

<pre><code>$(document).ready(function() {
 parent.set_size(this.body.offsetHeight + 5 + "px"); 
});
</code></pre>

added five above to eliminate scrollbar on small windows, it's never perfect on size.

And this inside your parent document.

<pre><code>function set_size(ht)
{
$("#iframeId").css('height',ht);
}
</code></pre>

blocks|key|913370|text|我发现以下代码在Chrome、火狐和IE11上都能用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913371|$('iframe').load(function+()+{
++++$('iframe').height($('iframe').contents().height());
});|code-block|syntax|javascript|913372|当Iframes内容加载完成后，将触发事件，并将IFrames高度设置为其内容的高度。这将仅适用于与IFrame相同域中的页面。|913373|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found the following to work on Chrome, Firefox and IE11:

<pre><code>$('iframe').load(function () {
 $('iframe').height($('iframe').contents().height());
});
</code></pre>

When the Iframes content is done loading the event will fire and it will set the IFrames height to that of its content. This will only work for pages within the same domain as that of the IFrame.

blocks|key|1128361|text|如今，在没有jQuery的情况下实现这一点的代码很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1128362|const+frame+=+document.querySelector('iframe')
function+syncHeight()+{
++this.style.height+=+`${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load',+syncHeight)|code-block|syntax|javascript|1128363|要取消与事件的关联，请执行以下操作：|1128364|frame.removeEventListener('load',+syncHeight)|1128365|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|$]]

The code to do this without jQuery is trivial nowadays:

<pre><code>const frame = document.querySelector('iframe')
function syncHeight() {
 this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)
</code></pre>

To unhook the event:

<pre><code>frame.removeEventListener('load', syncHeight)
</code></pre>

blocks|key|913548|text|这是对我有效的正确答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913549|$(document).ready(function+()+{
++++++++function+resizeIframe()+{
++++++++++++if+($('iframe').contents().find('html').height()+>+100)+{
++++++++++++++++$('iframe').height(($('iframe').contents().find('html').height())+%2B+'px')
++++++++++++}+else+{
++++++++++++++++setTimeout(function+(e)+{
++++++++++++++++++++resizeIframe();
++++++++++++++++},+50);
++++++++++++}
++++++++}
++++++++resizeIframe();
++++});|code-block|syntax|javascript|913550|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|$]]

this is the correct answer that worked for me

<pre><code>$(document).ready(function () {
 function resizeIframe() {
 if ($('iframe').contents().find('html').height() &gt; 100) {
 $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
 } else {
 setTimeout(function (e) {
 resizeIframe();
 }, 50);
 }
 }
 resizeIframe();
 });
</code></pre>

blocks|key|1128483|text|Accepted的$('iframe').load现在将产生a.indexOf+is+not+a+function错误。可以更新为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1128484|$('iframe').on('load',+function()+{
++//+...
});|code-block|syntax|javascript|1128485|自jQuery+1.8以来，很少有其他类似于.load的工具被弃用："Uncaught+TypeError:+a.indexOf+is+not+a+function"+error+when+opening+new+foundation+project|1128486|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat^0|9|G|U|R|0|0|M|5|Y|2J|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Accepted answer's <code>$('iframe').load</code> will now produce <code>a.indexOf is not a function</code> error. Can be updated to:

<pre><code>$('iframe').on('load', function() {
 // ...
});
</code></pre>

Few others similar to <code>.load</code> deprecated since jQuery 1.8: <a href="https://stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat">&quot;Uncaught TypeError: a.indexOf is not a function&quot; error when opening new foundation project</a>

blocks|key|913685|text|简单的一行代码从默认的最小高度开始，然后增加到内容大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913686|​|913687|<iframe+src="http://url.html"+onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight%2B"px";}(this));'+style="height:200px;width:100%25;border:none;overflow:hidden;"></iframe>|code-block|syntax|javascript|913688|913689|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

simple one-liner
starts with a default min-height and increases to contents size.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"&gt;&lt;/iframe&gt;</code></pre>
</div>
</div>

blocks|key|913776|text|这是一个免费的jQuery解决方案，可以在iframe中与SPA一起工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913777|document.getElementById('iframe-id').addEventListener('load',+function+()+{
++let+that+=+this;
++setTimeout(function+()+{
++++that.style.height+=+that.contentWindow.document.body.offsetHeight+%2B+'px';
++},+2000)+//+if+you're+having+SPA+framework+(angularjs+for+example)+inside+the+iframe,+some+delay+is+needed+for+the+content+to+populate
});|code-block|syntax|javascript|913778|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|$]]

This's a jQuery free solution that can work with SPA inside the iframe

<pre><code>document.getElementById('iframe-id').addEventListener('load', function () {
 let that = this;
 setTimeout(function () {
 that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
 }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});
</code></pre>

blocks|key|913843|text|这是我的ES6友好的no-jquery+take|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913844|document.querySelector('iframe').addEventListener('load',+function()+{
++++const+iframeBody+=+this.contentWindow.document.body;
++++const+height+=+Math.max(iframeBody.scrollHeight,+iframeBody.offsetHeight);
++++this.style.height+=+`${height}px`;
});|code-block|syntax|javascript|913845|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|$]]

This is my ES6 friendly no-jquery take

<pre><code>document.querySelector('iframe').addEventListener('load', function() {
 const iframeBody = this.contentWindow.document.body;
 const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
 this.style.height = `${height}px`;
});
</code></pre>

I have a Help page, help.php that I am loading inside an iframe in main.php
How can I get the height of this page once it has loaded in the iframe?

I am asking this because I can't style the height of to iframe to 100% or auto. That's why I think I need to use javascript..
I am using jQuery

CSS:

<pre><code>body {
 margin: 0;
 padding: 0;
}
.container {
 width: 900px;
 height: 100%;
 margin: 0 auto;
 background: silver;
}
.help-div {
 display: none;
 width: 850px;
 height: 100%;
 position: absolute;
 top: 100px;
 background: orange;
}
#help-frame {
 width: 100%;
 height: auto;
 margin:0;
 padding:0;
}
</code></pre>

JS:

<pre><code>$(document).ready(function () {
 $("a.open-help").click(function () {
 $(".help-div").show();
 return false;
 })
})
</code></pre>

HTML:

<pre><code>&lt;div class='container'&gt;
 &lt;!-- --&gt;
 &lt;div class='help-div'&gt;
 &lt;p&gt;This is a div with an iframe loading the help page&lt;/p&gt;
 &lt;iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"&gt;&lt;/iframe&gt;
 &lt;/div&gt; &lt;a class="open-help" href="#"&gt;open Help in iFrame&lt;/a&gt;

 &lt;p&gt;hello world&lt;/p&gt;
 &lt;p&gt;hello world&lt;/p&gt;
 &lt;p&gt;hello world&lt;/p&gt;
 &lt;p&gt;hello world&lt;/p&gt;
 &lt;p&gt;hello world&lt;/p&gt;
&lt;/div&gt;
</code></pre>

jquery get height of iframe content when loaded

jQuery

我有一个帮助页面，help.php，我是在main.php的iframe中加载的，一旦加载到iframe中，我如何获得此页面的高度？我之所以这样问，是因为我不能将to iframe的高度设置为100%或auto。这就是为什么我认为我需要使用javascript..我正在使用jQueryCSS：body {    mar...

问jquery在加载时获取iframe内容的高度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery在加载时获取iframe内容的高度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery在加载时获取iframe内容的高度
EN