window.open打开新HTML页面后无法获取DOM元素的解决方案

你代码里printWindow.document的指向本身没有问题，拿不到q1元素的核心原因是**window.open()加载新页面是异步行为**：你调用open方法后立刻执行DOM查询时，new.html的文档还没有完成解析，id为q1的div节点还未被渲染到DOM树中，此时查询自然返回空值。
另外要提前确认：两个页面必须满足同源策略（协议、域名、端口完全一致），你当前场景下两个页面使用同IP同端口的http服务访问，满足同源要求，不会被浏览器跨域安全策略拦截；如果直接用本地file协议打开页面，会被拦截无法访问新窗口DOM。

方案1：监听新窗口load事件（最简单，无需修改new.html代码） #

等新页面所有资源（DOM、脚本、图片等）全部加载完成后，再执行DOM查询操作，代码如下：

const printWindow = window.open("http://10.180.101.58:5500/new.html", 'Print');
// 先判断是否被弹窗拦截
if (!printWindow) {
  alert('请允许页面弹出新窗口权限');
  return;
}
printWindow.addEventListener('load', () => {
  // 此时new.html DOM已全部渲染完成，可以正常获取元素
  const myVar = printWindow.document.getElementById('q1');
  // 后续DOM操作逻辑写在这里即可，比如插入内容
  myVar.textContent = '从old.html写入的测试内容';
});

方案2：postMessage通信（更稳定，推荐生产环境使用） #

如果不想依赖load事件的触发时机，或者后续两个页面需要频繁传递数据，可以用跨页面通信的方式：在new.html加载完成后主动监听消息，old.html打开新页面后向其发送需要插入的内容即可，时序更可控。
old.html侧代码：

const printWindow = window.open("http://10.180.101.58:5500/new.html", 'Print');
if (!printWindow) {
  alert('请允许页面弹出新窗口权限');
  return;
}
printWindow.addEventListener('load', () => {
  // 向新窗口发送需要插入的数据
  printWindow.postMessage({
    type: 'insertContent',
    targetId: 'q1',
    content: '从old.html传入的内容'
  }, '*'); // 生产环境建议替换为你的具体源地址，避免安全问题
});

new.html侧（可以写在公共的DemoCode.js里）添加消息监听：

window.addEventListener('message', (e) => {
  // 生产环境建议此处校验e.origin是否为可信源，避免恶意消息注入
  const data = e.data;
  if (data.type === 'insertContent') {
    const target = document.getElementById(data.targetId);
    if (target) {
      target.innerHTML = data.content;
    }
  }
});

• 如果浏览器触发弹窗拦截，window.open会返回null，必须先做判空处理，否则后续逻辑会直接报错。
• 不要在window.open调用后同步执行新窗口的DOM操作，无论网络多快，新页面解析都需要一定时间，同步调用必然拿不到未生成的节点。
• 本地调试时不要直接双击打开html文件用file协议访问，要放在同一个静态服务下访问，否则会触发跨域拦截。

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