window.document未更新：新页面DOM获取异常技术求助

这个问题的核心在于页面跳转的异步性以及你的getDOM方法只监听了首次页面加载的完成状态，同时还要注意浏览器控制台的延迟求值特性带来的误导。

为什么会出现这种情况？ #

1. 异步加载的时间差：当你通过d.querySelector('a').click()触发页面跳转后，新页面的加载是异步过程。如果你没有等待新页面完全加载完成就去获取w.document，此时拿到的大概率还是旧页面的DOM引用。
2. getDOM的监听逻辑缺陷：你的getDOM方法只在首次打开页面时设置了定时器检查readyState，一旦首次页面加载完成，定时器就被清除了。当页面跳转后，没有重新监听新页面的加载状态，导致返回的window对象对应的document可能还未更新。
3. 控制台的延迟求值误导：浏览器控制台对对象采用延迟显示机制，当你console.log(w)时，控制台显示的是w的当前状态（已经更新为新页面的window），但你执行d = w.document的时机可能早于新页面加载完成，所以实际拿到的是旧DOM。

解决方案 #

1. 改造getDOM方法，支持监听页面跳转后的加载状态

修改getDOM，让它能感知页面的导航行为，在页面跳转后重新监听新页面的加载完成事件：

getDOM() {
  return new Promise((resolve) => {
    // 检查页面是否加载完成的核心逻辑
    const checkAndResolve = () => {
      if (this.w.document.readyState === 'complete') {
        resolve(this.w);
      } else {
        // 监听load事件，确保页面完全加载后再resolve
        const onLoad = () => {
          this.w.removeEventListener('load', onLoad);
          resolve(this.w);
        };
        this.w.addEventListener('load', onLoad);
      }
    };

    // 监听页面卸载事件，页面跳转时重新触发检查逻辑
    const handleUnload = () => {
      this.w.removeEventListener('beforeunload', handleUnload);
      // 延迟执行，确保新页面开始加载后再检查
      setTimeout(checkAndResolve, 0);
    };
    this.w.addEventListener('beforeunload', handleUnload);

    // 首次检查页面状态
    checkAndResolve();
  });
}

2. 避免缓存document引用，每次操作都获取最新的DOM

不要将document缓存到this.d中，而是每次需要操作DOM时，通过getDOM获取最新的window对象后再访问其document：

async foo() { 
  const w = await this.getDOM();
  const x = w.document.querySelector('button.x'); 
  console.log(x); // 此时获取的是新页面的元素
} 

3. 注意跨源限制（重要）

如果新打开的页面和当前页面不同源，浏览器会严格禁止你访问w.document，此时会抛出跨域错误。确保目标页面和当前页面的协议、域名、端口完全一致，否则无法进行DOM操作。

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