现代浏览器和部分 IE8 具有一些新功能，使这项任务比以前更容易。
留言
postMessage API 提供了一种在 iFrame 与其父级之间进行通信的简单方法。
要将消息发送到父页面，您可以按如下方式调用它。
parent.postMessage('Hello parent','http://origin-domain.com');
在另一个方向，我们可以使用以下代码将消息发送到 iFrame。
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080');
要接收消息，请为消息事件创建事件侦听器。
function receiveMessage(event)
{
if (event.origin !== "http://remote-domain.com:8080")
return;
console.log(event.data);
}
if ('addEventListener' in window){
window.addEventListener('message', receiveMessage, false);
} else if ('attachEvent' in window){ //IE
window.attachEvent('onmessage', receiveMessage);
这些示例使用 origin 属性来限制消息发送到哪里并检查它来自哪里。可以指定*允许发送到任何域，并且在某些情况下您可能希望接受来自任何域的消息。但是，如果您这样做，您需要考虑安全隐患并对传入消息实施您自己的检查，以确保它包含您所期望的内容。在这种情况下，iframe 可以将其高度发布到“*”，因为我们可能有多个父域。但是，检查传入消息是否来自 iFrame 是个好主意。
function isMessageFromIFrame(event,iframe){
var
origin = event.origin,
src = iframe.src;
if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) {
throw new Error(
'Unexpect message received from: ' + origin +
' for ' + iframe.id + '. Message was: ' + event.data
);
}
return true;
}
突变观察者
更现代的浏览器的另一个进步是MutationObserver，它允许您观察 DOM 中的变化；因此，现在可以检测可能影响 iFrame 大小的更改，而无需不断地使用 setInterval 进行轮询。
function createMutationObserver(){
var
target = document.querySelector('body'),
config = {
attributes : true,
attributeOldValue : false,
characterData : true,
characterDataOldValue : false,
childList : true,
subtree : true
},
observer = new MutationObserver(function(mutations) {
parent.postMessage('[iframeResize]'+document.body.offsetHeight,'*');
});
log('Setup MutationObserver');
observer.observe(target, config);
}
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver){
createMutationObserver();
}
计算出准确的高度
获得 iFrame 的准确高度并不像应有的那么简单，因为您可以选择六种不同的属性来检查它们，但它们都没有给出始终正确的答案。我想出的最好的解决方案是只要你不使用 CSS 来溢出 body 标签，这个函数就可以工作。
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
return parseInt(
document.defaultView.getComputedStyle(document.body, null),
10
);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
这是 IE9 版本，对于很长的 IE8 版本，请参阅此答案。
如果您确实溢出了正文并且您无法修复您的代码来阻止它，那么使用offsetHeight或的scrollHeight属性document.documentElement是您的最佳选择。两者都有优点和缺点，最好只是测试两者，看看哪个适合你。
其他问题
其他需要考虑的事情包括，页面上有多个 iFrame，CSS :Checkbox 和 :Hover 事件导致页面调整大小，避免在 iFrame 的 body 和 html 标签中使用 height auto，最后调整窗口大小。
IFrame 调整器库
我将所有这些都包含在一个简单的无依赖库中，它还提供了一些此处未讨论的额外功能。
https://github.com/davidjbradshaw/iframe-resizer
这适用于 IE8+。