同目录下iFrame与子文档被判定跨域：contentDocument返回null原因

云上老周

2026-8-15

问题原因及解决办法

你的问题不是跨域导致的，核心问题是代码执行时机不对：当experiment.js里的代码运行时，iframe内的interior.html还没加载完成。此时iframe.contentDocument并不是null（证明同源策略没触发——你所有资源都是通过localhost:8080访问的，协议、主机、端口完全一致），但文档内的DOM元素还未渲染，所以querySelector('[data-interior]')找不到目标元素，自然返回null。

验证方式

在代码里加一行打印就能确认：

console.log(iframe.contentDocument);

输出结果会是一个HTMLDocument对象，而非null，直接证明跨域不是问题根源。

解决办法

必须等iframe加载完成后，再去访问它的子文档DOM，推荐两种靠谱方式：

监听iframe的load事件（最精准）

const iframe = document.querySelector('[data-iframe]');
// 等待iframe加载完成后执行DOM操作
iframe.addEventListener('load', () => {
  const interiorParagraph = iframe.contentDocument.querySelector('[data-interior]');
  alert(interiorParagraph);
});

结合主文档的DOMContentLoaded事件（兜底方案）
如果担心主文档也未完全加载，可以先等主文档就绪，再监听iframe的加载状态：

document.addEventListener('DOMContentLoaded', () => {
  const iframe = document.querySelector('[data-iframe]');
  iframe.addEventListener('load', () => {
    const interiorParagraph = iframe.contentDocument.querySelector('[data-interior]');
    alert(interiorParagraph);
  });
});