Javascript 根据内容高度调整iframe高度

我正在尝试根据iframe内容（网页）的高度和宽度调整iframe的大小。我使用了在stack的另一个答案上找到的代码。对于新宽度的设置，这似乎是可行的，但我不能得到的高度工作，我不知道为什么

您可以在此处查看和编辑我的示例：

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

我做错了什么？

<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>

$（'iframe'）.load（函数（）{
this.style.height=this.contentWindow.document.body.offsetHeight+'px'；
});

有4种不同的属性可用于获取iFrame中内容的高度

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

可悲的是，它们都可以给出不同的答案，而这些答案在浏览器之间是不一致的。如果将正文边距设置为0，则

document.body.offsetHeight

将给出最佳答案。要获得正确的值，请尝试此函数；它取自库，该库还负责在内容更改或浏览器调整大小时保持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');
}

---

这里已经找到了解决方案：这应该是正确的答案。这是最优雅的。

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