带srcdoc属性的iframe自动调整大小问题咨询

嘿，我完全懂你那种“有时行有时不行”的烦躁——咱们先拆解下你现有代码为啥会不稳定，再给你几个更靠谱的替代方案，不用折腾postMessage那套！

为啥你的现有代码会失效？ #

你用的el.onload监听的是iframe本身的加载完成，但这里的坑在于：iframe的onload触发时，内部srcdoc里的资源（比如图片、动态渲染的内容）可能还没加载完毕。这时候el.contentWindow.document.body.scrollHeight拿到的只是部分内容的高度，等后续资源加载完，内容撑高了，但你的代码已经跑完了，自然高度就不对了。

而且srcdoc的加载机制和普通src略有不同，有时候内部DOM的初始化时机和iframe的onload并不同步，这也会导致高度计算偏差。

更优的解决方案：利用同源优势直接监听内部内容 #

因为srcdoc属性创建的iframe和父页面是同源的，你完全可以直接访问iframe内部的DOM，不用搞postMessage那套跨域通信。这里有两个关键优化点：

1. 等待内部所有资源加载完成+监听DOM动态变化 #

把监听逻辑从iframe的onload，改成监听iframe内部文档的load事件（确保所有图片、脚本都加载完），同时用MutationObserver监听DOM变化，应对动态生成的内容：

$(document).ready(function() {
  $('iframe').each(function(index, el) {
    el.onload = function() {
      const iframeWin = el.contentWindow;
      const iframeDoc = iframeWin.document;

      // 定义统一的高度更新函数
      const updateHeight = () => {
        el.style.height = iframeDoc.body.scrollHeight + 'px';
      };

      // 等待内部所有资源加载完毕
      iframeDoc.addEventListener('load', updateHeight);
      // 若DOM已提前加载完成，直接更新一次
      if (iframeDoc.readyState === 'complete') {
        updateHeight();
      }

      // 监听DOM的所有变化，应对动态内容（比如懒加载、脚本生成的元素）
      const observer = new MutationObserver(updateHeight);
      observer.observe(iframeDoc.body, {
        attributes: true,  // 监听样式属性变化
        childList: true,   // 监听子元素增减
        subtree: true      // 监听所有后代元素的变化
      });
    };
  });
});

2. 额外优化：避免滚动条干扰 #

记得给iframe加上scrolling="no"属性，这样即使高度计算偶尔有偏差，也不会出现滚动条影响体验：

<iframe srcdoc="你的邮件内容" scrolling="no"></iframe>

为啥这个方案比postMessage好？ #

因为srcdoc的同源特性，你不需要在邮件内容里注入任何JS代码——所有监听和计算都在父页面完成，既简洁又不会污染邮件内容的DOM结构，完美避开了你觉得繁琐的postMessage流程。

极端情况的兜底 #

如果你的邮件内容里有非常复杂的动态内容（比如无限滚动、延迟加载的模块），可以在updateHeight里加个小延迟，确保内容完全渲染：

const updateHeight = () => {
  setTimeout(() => {
    el.style.height = iframeDoc.body.scrollHeight + 'px';
  }, 100); // 可根据实际内容调整延迟时间
};

内容的提问来源于stack exchange，提问作者J. Doe