Html 让iframe根据内容自动调整高度而不使用滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9975810/
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
Make iframe automatically adjust height according to the contents without using scrollbar?
提问by akashbc
For example:
例如：
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
I want it to be able to adjust its height according to the contents inside it, without using scroll.
我希望它能够根据其中的内容调整其高度，而无需使用滚动。
回答by hjpotter92
Add this to your <head>section:
将此添加到您的<head>部分：
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
And change your iframe to this:
并将您的 iframe 更改为：
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
As found on sitepoint discussion.
正如在站点讨论中发现的那样。
回答by user2684310
You can use this library, which both initially sizes your iframe correctly and also keeps it at the right size by detecting whenever the size of the iframe's content changes (either via regular checking in a setIntervalor via MutationObserver) and resizing it.
您可以使用这个库，它既可以正确调整 iframe 的大小，也可以通过检测 iframe 内容的大小何时发生变化（通过定期检查 asetInterval或 via MutationObserver）并调整其大小来将其保持在正确的大小。
https://github.com/davidjbradshaw/iframe-resizer
https://github.com/davidjbradshaw/iframe-resizer
Their is also a React version.
他们也是 React 版本。
https://github.com/davidjbradshaw/iframe-resizer-react
https://github.com/davidjbradshaw/iframe-resizer-react
This works with both cross and same domain iframes.
这适用于跨域和同域 iframe。
回答by Chong Lip Phang
Here is a compact version:
这是一个紧凑的版本：
<iframe src="hello.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>
回答by Allan P
The suggestion by hjpotter92does not work in safari! I have made a small adjustment to the script so it now works in Safari as well.
hjpotter92的建议在 safari 中不起作用！我对脚本做了一些小的调整，所以它现在也可以在 Safari 中使用了。
Only change made is resetting height to 0 on every load in order to enable some browsers to decrease height.
所做的唯一更改是在每次加载时将高度重置为 0，以使某些浏览器能够降低高度。
Add this to <head>tag:
将此添加到<head>标签：
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And add the following onloadattribute to your iframe, like so
并将以下onload属性添加到您的 iframe，就像这样
<iframe onload='resizeIframe(this)'></iframe>
回答by Jimadine
The hjpotter92answer works well enough in certain cases, but I found the iframe content often got bottom-clipped in Firefox & IE, while fine in Chrome.
该hjpotter92答案的作品不够在某些情况下，但我发现iframe中的内容往往有底部裁剪在Firefox和IE浏览器，而精细的Chrome。
The following works well for me and fixes the clipping problem. The code was found at http://www.dyn-web.com/tutorials/iframes/height/. I have made a slight modification to take the onload attribute out of the HTML. Place the following code after the <iframe>HTML and before the closing </body>tag:
以下对我来说效果很好并修复了剪辑问题。该代码位于http://www.dyn-web.com/tutorials/iframes/height/。我做了一点修改，从 HTML 中取出 onload 属性。将以下代码放在<iframe>HTML 之后和结束</body>标记之前：
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>
Your iframe HTML:
您的 iframe HTML：
<iframe id="ifrm" src="some-iframe-content.html"></iframe>
Note if you prefer to include the Javascript in the <head>of the document then you can revert to using an inline onloadattribute in the iframeHTML, as in the dyn-webweb page.
请注意，如果您更喜欢<head>在文档中包含 Javascript，那么您可以恢复使用HTML 中的内联onload属性iframe，就像在dyn-web网页中一样。
回答by rybo111
Avoid inline JavaScript; you can use a class:
避免内联 JavaScript；你可以使用一个类：
<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>
And reference it with jQuery:
并使用 jQuery 引用它：
$('.iframe-full-height').on('load', function(){
this.style.height=this.contentDocument.body.scrollHeight +'px';
});
回答by Nathalia Xavier
jQuery's .contents()method method allows us to search through the immediate children of the element in the DOM tree.
jQuery 的.contents()方法允许我们搜索 DOM 树中元素的直接子元素。
jQuery:
jQuery：
$('iframe').height( $('iframe').contents().outerHeight() );
Remember that the body of the page inner the iframe must have its height
请记住，iframe 内部的页面主体必须具有其高度
CSS:
CSS：
body {
height: auto;
overflow: auto
}
回答by Lucky
Try this for IE11
在 IE11 上试试这个
<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
回答by user2992220
This works for me (also with multiple iframes on one page):
这对我有用（在一页上也有多个 iframe）：
$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
回答by ctrl-alt-delor
This works for me (mostly).
这对我有用（主要是）。
Put this at the bottom of your page.
把它放在你的页面底部。
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="application/javascript" src="/script/jquery.browser.js">
</script>
<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>
<script type="application/javascript">
jQuery('iframe').iframeAutoHeight();
$(window).load(
function() {
jQuery('iframe').iframeAutoHeight();
}
);
// for when content is not html e.g. a PDF
function setIframeHeight() {
$('.iframe_fullHeight').each(
function (i, item) {
item.height = $(document).height();
}
);
};
$(document).ready( function () {
setIframeHeight();
});
$(window).resize( function () {
setIframeHeight();
});
</script>
The first half is from ???, and works when there is html in the iframe.
The second half sets the iframe to page height (not content height), when iframes class is iframe_fullHeight. You can use this if the content is a PDF or other such like, but you have to set the class. Also can only be used when being full height is appropriate.
前半部分来自???，当iframe 中有html 时有效。当 iframes 类为iframe_fullHeight. 如果内容是 PDF 或其他类似内容，您可以使用它，但您必须设置类。也只能在全高合适的情况下使用。
Note: for some reason, when it recalculates after window resize, it gets height wrong.
注意：由于某种原因，当它在调整窗口大小后重新计算时，它会得到高度错误。
