这个问题我碰到过好多次——Chrome对本地file://协议下的跨文件访问限制确实比Firefox和Edge严格得多，这就是你遇到差异的核心原因。

Chrome默认在本地文件场景下启用了严格的同源策略：即使是同一文件夹下的两个HTML文件，通过file://协议访问时，Chrome会将它们视为不同源，直接阻止父页面和iframe之间的DOM访问。而Firefox和Edge在本地文件场景下放宽了这个限制，所以你的原有代码能正常运行。

1. 临时禁用Chrome的本地文件同源限制（开发测试用） #

这是最快的临时解决办法，但只适合本地开发时用：

• 先关闭所有Chrome窗口（必须完全关闭，包括后台进程）
• 打开命令提示符/终端，运行对应系统的命令：

  # Windows
  chrome.exe --allow-file-access-from-files
  
  # Mac
  open -a "Google Chrome" --args --allow-file-access-from-files
  
  # Linux
  google-chrome --allow-file-access-from-files
  

注意：这个参数会降低Chrome的安全性，日常浏览网页时一定要关掉这个模式。

2. 搭建本地HTTP服务器（推荐长期方案） #

把本地文件放到HTTP服务器环境下，所有文件都属于同一源（http://localhost），就能彻底避开同源限制：

• 用Python快速搭建（大部分系统自带Python）：

  # Python 3
  python -m http.server 8000
  
  # Python 2
  python -m SimpleHTTPServer 8000
  

• 启动服务器后，在Chrome中访问http://localhost:8000/你的主页面.html，iframe加载的表格文件也用http://localhost:8000/路径访问，此时跨iframe的DOM访问就能正常工作了。

3. 重构代码：将表格嵌入主页面 #

如果不想折腾服务器或Chrome参数，可以直接把两个表格文件的内容嵌入到主页面的隐藏容器里，代替iframe：

<!-- 隐藏的表格容器 -->
<div style="display: none;" id="spell-table">
  <!-- 把法术总表的完整table代码粘贴到这里 -->
</div>
<div style="display: none;" id="rpg-table">
  <!-- 把RPG表格的完整table代码粘贴到这里 -->
</div>

然后你的JavaScript直接访问这些容器里的表格元素即可，完全不存在跨文件访问的问题。

4. 使用File API读取文件（适合用户手动上传场景） #

如果允许用户手动选择表格文件，可以用File API在前端读取并解析：

// 给页面加一个文件输入框
<input type="file" id="table-file" accept="text/html">

<script>
document.getElementById('table-file').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function(event) {
    // 解析HTML内容
    const parser = new DOMParser();
    const doc = parser.parseFromString(event.target.result, 'text/html');
    const targetTable = doc.querySelector('table');
    // 这里可以处理表格数据了
  };
  
  reader.readAsText(file);
});
</script>

不过这个方法需要用户手动操作，适合不需要自动加载固定表格的场景。

内容的提问来源于stack exchange，提问作者James V. Fields