为何readyState为complete时iframe内querySelector返回null？

问题现象 #

向页面中添加使用srcdoc嵌入内容的iframe后，尝试通过iframe.contentWindow.document.querySelector('#test')获取内部元素时发现：

• 监听iframe的load事件能成功获取目标元素；
• 但在iframe的document.readyState显示为complete时调用querySelector，却返回null，且iframe内无任何额外脚本、图片或样式表。

原因拆解 #

你遇到的核心问题是：在document.body.appendChild(iframe)后立即访问的iframe.contentWindow.document是一个临时的空文档。这个临时文档会先进入complete状态，但它并不是srcdoc中定义的真正文档。

当浏览器处理srcdoc内容时，会先创建一个空的临时文档占位，随后才会将srcdoc的内容解析替换成真正的文档。只有当真正的文档加载完成后，才会触发iframe的DOMContentLoaded和load事件，这时候访问的document才包含你定义的#test元素。

看你代码里的init阶段输出：此时拿到的是临时文档，它的readyState确实是complete，但这个文档里根本没有#test节点，自然返回null。

解决方法 #

方法1：依赖可靠的事件监听（推荐） #

直接通过iframe的DOMContentLoaded或load事件来处理内部元素，这两个事件触发时，真正的文档已经加载解析完成，能确保获取到目标元素：

const srcdoc = `
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <div id="test"></div>
</body>
</html>
`;

const iframe = document.createElement('iframe');

// 用DOMContentLoaded或load都可以，DOMContentLoaded触发更早
iframe.addEventListener('DOMContentLoaded', () => {
  const target = iframe.contentWindow.document.querySelector('#test');
  console.log('成功获取元素:', target);
});

iframe.srcdoc = srcdoc;
document.body.appendChild(iframe);

方法2：监听contentWindow的readystatechange事件 #

如果需要基于readyState判断，要监听iframe内部文档的readystatechange事件，确保访问的是最终的文档：

const srcdoc = `
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <div id="test"></div>
</body>
</html>
`;

const iframe = document.createElement('iframe');

iframe.addEventListener('load', () => {
  iframe.contentWindow.document.addEventListener('readystatechange', () => {
    if (iframe.contentWindow.document.readyState === 'complete') {
      const target = iframe.contentWindow.document.querySelector('#test');
      console.log('通过readystatechange获取元素:', target);
    }
  });
});

iframe.srcdoc = srcdoc;
document.body.appendChild(iframe);

关键提示 #

不要在appendChild后立即访问iframe的document，此时的文档是临时占位用的，不包含srcdoc中的实际内容。只有当iframe的DOMContentLoaded或load事件触发后，才能安全地操作内部DOM元素。

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