使用iframe高度随内容改变

一、改变iframe页面的内容

如果需要使用iframe高度随内容改变，我们需要在iframe加载之前确定iframe要加载的内容大小。因此，我们需要做出如下改变：

1. 在iframe内的内容改变时，通知父页面进行高度调整。

我们可以在iframe内使用以下代码：

window.parent.postMessage({
  'type': 'resize',
  'height': document.body.offsetHeight
}, '*');

在父页面内使用如下代码进行响应：

window.addEventListener('message', function(event) {
  if (event.data.type === 'resize') {
    document.querySelector('iframe').style.height = event.data.height + 'px';
  }
});

2. 在iframe外的脚本文件中通过ajax获取iframe要加载的内容大小。

例如，在jQuery中可以使用如下代码：

$.ajax({
  url: 'iframe.html',
  type: 'GET',
  success: function(response) {
    $('iframe').height($(response).height());
  }
});

二、获取iframe内容高度

在第一部分中，我们已经讲到如何实现在iframe内部通知父页面进行高度调整。但是，我们也需要知道iframe内部内容的高度大小。以下是获取iframe内容高度的方法：

1. 使用window.onload事件

当iframe内部内容加载完成后，window.onload事件会被触发。我们可以通过下列代码获取iframe内部内容的高度：

<iframe id="myIframe" src="iframe.html" onload="resizeIframe()"></iframe>
<script>
function resizeIframe() {
  var iframe = document.getElementById('myIframe');
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

2. 使用MutationObserverAPI

MutationObserver API能够观察DOM树的变化，并在有变化时调用特定函数。我们可以利用这个API去监控iframe内部内容的变化。

以下是一个使用MutationObserverAPI的代码范例：

<iframe id="myIframe" src="iframe.html"></iframe>
<script>
var iframe = document.getElementById('myIframe');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
  });
});
observer.observe(iframe.contentWindow.document.body, {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
});
</script>

三、结合两种方法

将两个方法结合起来，可以实现实时更改iframe高度，以下是示例代码：

<iframe id="myIframe" src="iframe.html" onload="resizeIframe()"></iframe>
<script>
var iframe = document.getElementById('myIframe');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
  });
});
observer.observe(iframe.contentWindow.document.body, {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
});
function resizeIframe() {
  $.ajax({
    url: 'iframe.html',
    type: 'GET',
    success: function(response) {
      iframe.style.height = $(response).height() + 'px';
    }
  });
}
</script>

四、使用第三方库

当然我们也可以使用第三方库来帮助实现这个功能。目前比较常见的库是iframe-resizer和Pym.js。以下是一个使用Pym.js的代码范例：

<div id="parent">
  <iframe id="myIframe" src="iframe.html"></iframe>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pym/1.2.0/pym.js"></script>
<script>
var pymParent = new pym.Parent('parent', 'iframe.html');
</script>

五、总结

本文中，我们介绍了如何使用多种方法实现iframe高度随内容改变。我们可以选择最适合自己项目的解决方案来使用。