jQuery 如何根据 iframe 内的动态内容更改 iframe 的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8279489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change height of iframe based on dynamic conent within the iframe?
提问by Michael
I have an iframe that has dynamic content. If the answers specific questions, additional information displays (hidden div becomes visible). I'd like the height of the iframe to expand. I know this question has been asked on here multiple times, but it seems like it is typically when a different page within the iframe is loaded, not when content is changed dynamically within the iframe.
我有一个具有动态内容的 iframe。如果回答特定问题，则会显示其他信息（隐藏的 div 变为可见）。我想扩大 iframe 的高度。我知道这个问题在这里被问过多次，但似乎通常是在加载 iframe 中的不同页面时，而不是在 iframe 中动态更改内容时。
Here is an example I tried to put together using jsFiddle:
这是我尝试使用 jsFiddle 组合在一起的示例：
iframe: http://jsfiddle.net/B4AKc/2/
iframe：http: //jsfiddle.net/B4AKc/2/
page: http://jsfiddle.net/PmBrd/
页面：http: //jsfiddle.net/PmBrd/
Any ideas?
有任何想法吗？
回答by Esailija
Does this work for you?
这对你有用吗？
Code:
代码：
var iframe = document.getElementById("ifr").contentWindow;
iframe.$(".toggle_div").bind("change", function () {
$("#ifr").css({
height: iframe.$("body").outerHeight()
});
});
Since you mentioned they are in the same domain, it's just a matter of doing something similar with your real app.
由于您提到它们在同一个域中，因此只需对您的真实应用程序执行类似操作即可。
回答by Eugine Joseph
Check this one.
You can get the iframe size using javascript itself.
Using setInterval, check the window height each time.
检查这个。您可以使用 javascript 本身获取 iframe 大小。
使用 setInterval，每次检查窗口高度。
< iframe src='<YOUR_URL>' frameborder='0' scrolling='no' id='frame_id' style='overflow:hidden; width:984px;' >
</iframe>
<script language="javascript" type="text/javascript">
setInterval(function(){
document.getElementById("frame_id").style.height = document.getElementById("frmid").contentWindow.document.body.scrollHeight + 'px';
},1000)
</script>
回答by ddlab
may be a bit late, as all the other answers are from 2011 :-) but... here′s my solution. Tested in actual FF, Chrome and Safari 5.0
可能有点晚了，因为所有其他答案都来自 2011 年 :-) 但是......这是我的解决方案。在实际 FF、Chrome 和 Safari 5.0 中测试
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});
Hope this will help anybody.
希望这会帮助任何人。
回答by olofom
Esailija's answer works fine, but this is nicer imo.
Esailija 的回答工作正常，但这是更好的 imo。
$('#ifr').contents($(".toggle_div")).bind("change", function () {
$("#ifr").height($("#ifr").contents().find("html").height());
});
回答by dSquared
Take a look at the jQuery postMessageplugin. It allows you to pass information from the child frame to the parent. You could change the code inside the child frame to post the content height to the parent on content change, which the parent could then use to resize the iframe accordingly.
看看 jQuery postMessage插件。它允许您将信息从子框架传递到父框架。您可以更改子框架内的代码，以在内容更改时将内容高度发布到父级，然后父级可以使用它来相应地调整 iframe 的大小。
The two pages mustbe on the same domain to work.
这两个页面必须在同一个域中才能工作。
I hope this helps!
我希望这有帮助！
