Html 根据内容高度调整 iframe 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18765920/
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
Resize iframe height according to content height
提问by dzordz
I'm trying to resize an iframe according to height and width of it's content(webpage). I've used a code that I found on stack's other answer. For setup of new width, it seems that works but I can't get that height to work and I don't know why.
我正在尝试根据其内容（网页）的高度和宽度调整 iframe 的大小。我使用了在堆栈的其他答案中找到的代码。对于新宽度的设置，似乎可行，但我无法使该高度起作用，我不知道为什么。
You can see and edit my example here: http://jsfiddle.net/dzorz/pvtr3/
您可以在此处查看和编辑我的示例：http: //jsfiddle.net/dzorz/pvtr3/
Here is my HTML:
这是我的 HTML：
<iframe id="finance-iframe" class="finance-iframe" src="http://wordpress.org" width="100%" height="300px" marginheight="0" frameborder="0" onLoad="autoResize('finance-iframe');"></iframe>
and javascript:
和 javascript：
function autoResize("finance-iframe"){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById("finance-iframe").contentWindow.document.body.scrollHeight;
newwidth=document.getElementById("finance-iframe").contentWindow.document.body.scrollWidth;
}
document.getElementById("finance-iframe").height= (newheight) + "px";
document.getElementById("finance-iframe").width= (newwidth) + "px";
}
What am I doing wrong?
我究竟做错了什么？
回答by user3426858
There are 4 different properties to look into to get the height of the content in an iFrame.
有 4 个不同的属性需要查看以获取 iFrame 中内容的高度。
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
Sadly they can all give different answers and these are inconsistent between browsers. If you set the body margin to 0 then the document.body.offsetHeightgives the best answer. To get the correct value try this function; which is taken from the iframe-resizerlibrary that also looks after keeping the iFrame the correct size when the content changes,or the browser is resized.
可悲的是，它们都可以给出不同的答案，而且这些在浏览器之间是不一致的。如果您将正文边距设置为 0，则document.body.offsetHeight给出了最佳答案。要获得正确的值，请尝试此功能；它取自iframe-resizer库，该库还负责在内容更改或调整浏览器大小时保持 iFrame 的正确大小。
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
回答by user2560165
<section id="about" data-type="background" data-speed="10" class="pages">
<iframe src="index.html" id="demo_frame" align="center" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</section>
<script>
$('iframe').load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
</script>
