如何堆叠多个iframe并动态适配内容高度？软件更新日志开发

问题根源 #

你遇到的跨域错误，本质是本地直接打开HTML文件（file://协议）时的同源限制：浏览器会将这类页面的origin标记为null，即便iframe加载的是同目录下的文件，浏览器仍会判定为跨域，阻止主页面访问iframe的document对象。

解决方案 #

1. 用本地HTTP服务器运行（推荐，开发+生产适配）

将所有文件放在本地服务器环境下运行（如http://localhost），此时所有页面同源，跨域限制自动解除，动态调整iframe高度的代码可以正常工作。

• 启动本地服务器的简单方式：
  • Python：python -m http.server 8000
  • Node.js：npx http-server
• 动态调整iframe高度的示例代码：

  // 主页面JS
  function adjustIframeHeight(iframeElem) {
    iframeElem.style.height = iframeElem.contentWindow.document.body.scrollHeight + 'px';
  }
  
  // 监听iframe加载完成事件
  const logIframe = document.getElementById('version-log-iframe');
  logIframe.addEventListener('load', () => adjustIframeHeight(logIframe));
  

2. 本地文件场景的临时测试方案（仅开发用，不推荐给用户）

如果必须直接用file://协议测试，可以修改浏览器启动参数关闭跨域限制，但这存在安全风险，仅限开发阶段使用：

• Chrome/Edge：启动时添加参数 --allow-file-access-from-files
• Firefox：在about:config中设置security.fileuri.strict_origin_policy为false

3. 架构优化：替换iframe为AJAX加载片段（彻底规避跨域）

放弃iframe方案，将每个版本的日志做成纯HTML片段（不含<html>/<head>/<body>标签），主页面通过AJAX加载这些片段并插入到页面中：

• 示例代码：

  // 主页面加载指定版本日志
  async function loadVersionLog(version) {
    try {
      const res = await fetch(`logs/${version}.html`);
      const content = await res.text();
      document.getElementById(`log-container-${version}`).innerHTML = content;
    } catch (err) {
      console.error(`加载${version}日志失败：`, err);
    }
  }
  
  // 加载所有需要展示的版本
  loadVersionLog('v2.1.0');
  loadVersionLog('v2.0.0');
  

这种方案既避免了重复维护，又天然适配高度，同时在file://协议下也不会触发跨域限制（同目录文件的fetch是允许的）。

内容的提问来源于stack exchange，提问作者Jérémie Habel