同域下实现iframe高度随内容动态调整的问题

嘿，我懂你的困扰——同域下想让iframe既能在初始加载时自动适配高度，又能在内部内容动态变化时实时调整，而你现有的代码只在onload时触发一次，肯定满足不了需求对吧？别担心，给你两个实用的解决方案，都是针对同域场景的：

这是最省心的方法，不需要修改iframe内部的代码，主页面就能自动监测到iframe里的内容变化，然后调整高度。原理是用现代浏览器支持的MutationObserver接口，监听iframe文档的DOM变化。

修改后的主页面代码：

// 核心的resize函数不变
function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

// 页面加载完成后设置监听
window.addEventListener('load', function() {
  const targetIframe = document.querySelector('iframe');
  const iframeDocument = targetIframe.contentWindow.document;

  // 创建观察者实例，一旦DOM变化就触发resize
  const observer = new MutationObserver(() => {
    resizeIframe(targetIframe);
  });

  // 配置观察者：监听body的所有子节点变化、子树变化，以及属性变化
  observer.observe(iframeDocument.body, {
    childList: true,
    subtree: true,
    attributes: true
  });
});

对应的HTML可以保留onload触发初始resize：

<iframe src="your-content-page.html" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>

注意：如果iframe里有动态加载的图片，MutationObserver可能不会捕捉到图片加载完成后的高度变化（因为图片加载是资源加载，DOM结构没变化但高度变了）。这时候可以额外在iframe内部监听图片的load事件，或者在主页面里给iframe的contentWindow添加load事件监听。

如果iframe里的内容是你可控的（比如你能修改里面的代码），那这种方式更高效——当你明确知道内容要变化的时候（比如点击按钮添加内容、异步请求加载完成），主动调用父页面的resize函数。

比如iframe内部的代码：

// 假设这是iframe里的一个添加内容的函数
function addNewContent() {
  // 动态添加内容的逻辑
  const newSection = document.createElement('section');
  newSection.textContent = '这是刚新增的内容，会让高度增加';
  document.body.appendChild(newSection);

  // 通知父页面调整iframe高度
  parent.resizeIframe(parent.document.querySelector('iframe'));
}

主页面的resize函数和HTML保持你原来的就行，这样每次内容主动变化时，都会触发高度调整，精准又高效。

两种方案可以根据你的实际场景选：如果iframe内容不可控，用方案1；如果可控，方案2更优。

内容的提问来源于stack exchange，提问作者SupremeDEV