根据内容高度调整iframe高度 [英] Resize iframe height according to content height

问题描述

我想根据内容（网页）的高度和宽度调整iframe的大小。我使用的代码，我发现堆栈的其他答案。对于新宽度的设置，似乎工程，但我不能得到那个高度工作，我不知道为什么。

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.

你可以看到和编辑我的例子这里： http://jsfiddle.net/dzorz/pvtr3/

You can see and edit my example here: http://jsfiddle.net/dzorz/pvtr3/

这是我的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>

和javascript：

and 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";
}

我做错了什么？

推荐答案

有4个不同的属性可以查看iFrame中的内容的高度。

There are 4 different properties to look into to get the height of the content in an iFrame.

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

很遗憾，他们都可以给出不同的答案，而且这些在浏览器之间是不一致的。如果你设置body margin为0，然后 document.body.offsetHeight 给出最好的答案。要获得正确的值，请尝试此函数;这取自 iframe-resizer 库，也会照顾到

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.offsetHeight gives the best answer. To get the correct value try this function; which is taken from the iframe-resizer library that also looks after keeping the iFrame the correct size when the content changes,or the browser is resized.

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');
}

这篇关于根据内容高度调整iframe高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！