如何移除HTML中iframe滚动条并自动适配内容尺寸（本地无服务器）

错误原因说明 #

本地直接用file://协议打开index.html时，浏览器的同源策略会将每个本地文件视为独立的源，主页面无法直接访问iframe内部的contentWindow.document，因此触发Blocked a frame with origin "null" from accessing a cross-origin frame错误，导致无法获取内容尺寸。

无需本地服务器的解决方案 #

方案：通过postMessage跨源通信传递尺寸 #

这种方法需要修改每个iframe内部的HTML文件，让它们主动向主页面发送自身的尺寸数据，主页面接收后调整iframe的宽高。

1. 主页面修改

• 给每个iframe添加唯一ID，方便识别；添加scrolling="no"移除滚动条
• 监听message事件，接收iframe发来的尺寸并调整样式

主页面HTML代码：

<div>
  <iframe src="../repository/repo/build/auto/documents/layer1/generated_doc.html" scrolling="no" id="iframe-doc"></iframe>
  <iframe src="../repository/repo/build/auto/documents/layer1/generated_info.html" scrolling="no" id="iframe-info"></iframe>
  <iframe src="../repository/repo/build/auto/documents/layer1/generated_log.html" scrolling="no" id="iframe-log"></iframe>
</div>

主页面脚本：

(function() {
  // 监听iframe发来的尺寸消息
  window.addEventListener('message', function(e) {
    // 验证消息类型和来源（本地file://环境下origin为null）
    if (e.origin === 'null' && e.data.type === 'iframe-size') {
      const targetIframe = document.getElementById(e.data.iframeId);
      if (targetIframe) {
        targetIframe.style.height = `${e.data.height}px`;
        targetIframe.style.width = `${e.data.width}px`;
      }
    }
  });
})();

2. iframe内部页面修改

在每个iframe对应的HTML文件（比如generated_doc.html、generated_info.html等）的末尾添加以下脚本，页面加载完成后计算自身尺寸并发送给主页面：

(function() {
  window.addEventListener('load', function() {
    // 计算内容的实际宽高
    const contentHeight = document.body.scrollHeight;
    const contentWidth = document.body.scrollWidth;
    // 向主页面发送尺寸数据，注意iframeId要和主页面中对应iframe的ID一致
    window.parent.postMessage({
      type: 'iframe-size',
      iframeId: 'iframe-doc', // 对应主页面中该iframe的ID
      height: contentHeight,
      width: contentWidth
    }, '*'); // 本地file://环境下使用'*'，因为origin为null
  });
})();

注意：每个iframe内部的脚本中，iframeId要修改为对应主页面中该iframe的ID（比如generated_info.html的脚本里要写iframeId: 'iframe-info'）。

替代方案（无法修改iframe内部页面时） #

如果无法修改iframe内部的HTML文件，唯一可行的本地方案是预先计算每个页面的实际宽高，直接写死在iframe的style属性中：

<iframe src="../repository/repo/build/auto/documents/layer1/generated_doc.html" scrolling="no" style="width: 800px; height: 1200px;"></iframe>

这种方式不够灵活，但能满足无需服务器的需求。

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