本地Windows环境Chrome/Edge中iframe加载复制移除逻辑失效问题

问题现象 #

这段HTML代码在服务器环境可正常运行，但本地Windows的Chrome、Edge浏览器执行失败，仅Firefox能正常工作。代码逻辑为：加载iframe后将内容复制到前方div，再移除iframe；若页面背景呈灰色，说明iframe移除操作失败。

原代码 #

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Includes</title>

<body>
  <h1>The Simplest Ways to Handle HTML Includes</h1>
  <h3>https://www.filamentgroup.com/lab/html-includes/</h3>
  <p>Load iframe, copy to <div> before, and remove iframe.
    <p>If the background is gray, then removing the iframe failed.
      <p>Works from server, but not from a local file.</p>
      <div></div>
      <iframe name="content" style="background-color: lightgrey; width:100%" src="fff.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove(); ">
    </iframe>
</body>

报错信息 #

fff.html:14 
        
       Uncaught TypeError: Cannot read properties of null (reading 'body')
    at HTMLIFrameElement.onload (fff.html:14:143)

原因分析 #

Chrome和Edge对本地文件（file://协议）的同源策略限制更严格，即使是同一目录下的文件，也会阻止iframe访问contentDocument，导致this.contentDocument为null，进而读取body属性时触发报错。Firefox在本地文件的同源策略上限制较宽松，因此可以正常执行。

解决办法 #

1. 启动本地静态服务器（推荐） #

通过本地服务器访问文件，模拟线上环境，规避跨域限制：

• Python 3：在文件目录打开命令行，执行 python -m http.server
• Python 2：执行 python -m SimpleHTTPServer
  之后通过 http://localhost:8000 访问你的HTML文件即可。

2. 修改浏览器启动参数（仅临时测试） #

给Chrome/Edge添加启动参数，放宽本地文件访问限制：
右键浏览器快捷方式，在「目标」栏末尾添加 --allow-file-access-from-files（注意前面有空格），重启浏览器后打开本地文件。此方法会降低浏览器安全性，仅适合临时测试。

3. 替换为Fetch API方案 #

放弃iframe，直接用Fetch API加载HTML内容并插入到页面，避免跨域问题：

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Includes</title>

<body>
  <h1>The Simplest Ways to Handle HTML Includes</h1>
  <h3>HTML Includes Demo</h3>
  <p>Load HTML content via Fetch, insert into div.</p>
  <p>No iframe issues with local files.</p>
  <div id="include-target"></div>

  <script>
    fetch('fff.html')
      .then(response => response.text())
      .then(html => {
        document.getElementById('include-target').innerHTML = html;
      })
      .catch(error => console.error('加载失败:', error));
  </script>
</body>

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