javascript iframe 自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8251038/
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
iframe autoheight
提问by Andres
I've searched everywhere including here and haven't been able to come up with a good solution. I ran into this and it works in everybrowser except Firefox and IE :( Help?
我已经搜索了所有地方，包括这里，但没有找到一个好的解决方案。我遇到了这个问题，它适用于除 Firefox 和 IE 之外的所有浏览器:( 帮助？
jQuery(function() {
sizeIFrame();
jQuery("#ifrm").load(sizeIFrame);
});
function sizeIFrame() {
var videoBrowser = jQuery("#ifrm");
var innerDoc = videoBrowser.get(0).contentDocument ?
videoBrowser.get(0).contentDocument.documentElement :
videoBrowser.get(0).contentWindow.document.body;
videoBrowser.height(35);
videoBrowser.height(innerDoc.scrollHeight + 35);
}
and it's on the same domain and here's my <iframe>
它在同一个域中，这是我的 <iframe>
<iframe id="ifrm" src="http://localhost:8080/linkconsulting/temp.html" width="100%" frameborder="0" scrolling="no"></iframe>
I'm testing on localhostright now but it will still be on same domain later.
我现在正在测试，localhost但以后它仍然会在同一个域中。
Update: So I've noticed that this is not working because it seems to be interfering with tiny.scrollbar plugin or viceversa. Not sure what to do here :(
更新：所以我注意到这不起作用，因为它似乎干扰了 tiny.scrollbar 插件，反之亦然。不知道在这里做什么:(
采纳答案by Andres
Well I ended up taking a different approach. I got the contents from inside the iframe and inserted them inside a div. Here's the code in case anyone else needs it.. Thank you all for your patience and great help.
好吧，我最终采取了不同的方法。我从 iframe 中获取内容并将它们插入到 div 中。这是代码，以防其他人需要它..感谢大家的耐心和大力帮助。
<script>
function getFile(){
var content = jQuery('#servercontent')[0];
var ifrm = jQuery('#ifrm')[0];
content.innerHTML = ifrm.contentDocument.body.innerHTML;
}
</script>
<body>
<div id="servercontent"></div>
<iframe id="ifrm" src="webinsamedomain.com" width="100%" frameborder="0" scrolling="no" style="display:none;" onload="getFile();" ></iframe>
</body>
回答by Matthew
I have a feeling that this isn't working because the height is being calculated before the document has loaded. If you were to call sizeIFrame in the document.ready event it might make a difference.
我觉得这不起作用，因为在加载文档之前计算了高度。如果您要在 document.ready 事件中调用 sizeIFrame，它可能会有所不同。
In your IFrame try this code:
在您的 IFrame 中尝试以下代码：
jQuery(function(){
parent.sizeIFrame();
}
Update: As per our chat, you can get the height of the document in the IFrame with:
更新：根据我们的聊天记录，您可以通过以下方式获取 IFrame 中文档的高度：
parent.jQuery(document).height()
I would say to pass the height as a parameter to your function.
我会说将高度作为参数传递给您的函数。
回答by jkriddle
You're using jQuery, try using the iFrameAutoHeight plugin
您正在使用 jQuery，请尝试使用 iFrameAutoHeight 插件
