iframe clientHeight在控制台中是不同的，需要获得真正的iframe体高（angular2）

Question

Plunkr：http://embed.plnkr.co/w2FVfKlWP72pzXIsfsCU/

当我浏览ElementRef时，我得到以下高度：

当我在浏览器控制台中返回值时，我得到一个错误的值

目标：将iframe的大小调整为iframes内容的实际高度

问题：iframes身体的真实高度与我得到的不同。我究竟做错了什么？

非常感谢！

Answer 1

获得iFrame的准确高度并不像应该的那样简单，因为您可以选择六种不同的属性，但是没有一种能够给出正确的答案。我提出的最简单的解决方案是，只要您不使用CSS来溢出正文标记，此功能就可以正常工作。

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        return parseInt(
            document.defaultView.getComputedStyle(document.body, null),
            10
        );
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

这是IE9版本，对于很长的IE8版本，请参阅此answer。

如果您确实溢出了正文而无法修复代码以阻止此操作，那么使用offsetHeight的{​​{1}}或scrollHeight属性是更好的选择。两者都有利弊，最好只测试两者，看看哪些适合你。

最可靠的方法是锻炼页面上最低元素底部的位置。这在现代浏览器中效果很好，但在较旧的浏览器中效果很慢。

document.documentElement

这些代码段来自我编写的库，以保持iFrame的大小与其内容相符。除此之外，它还可以在iFrame和父页面中监视事件，以确保iFrame保持正确的大小，并提供其他功能来解决常见的iFrame问题。所以你可能会感兴趣。

https://github.com/davidjbradshaw/iframe-resizer