Angular 6中如何检测新窗口的URL变化？

Hey there! Let's break down why your popstate listener isn't working and fix this step by step.

为什么popstate事件不触发？ #

popstate事件只有在浏览器通过前进/后退按钮改变同一文档的历史记录时才会触发。而你的场景是：新窗口先打开登录页，登录完成后跳转到returnUrl对应的新页面——这是页面重载/新文档加载，不属于同一文档的历史变更，所以popstate根本不会被触发。

下面是几种可行的解决方案，根据你的跨域情况选择：

方案1：同源场景下监听load事件（最直接） #

如果新窗口的域名和父窗口完全同源（协议、域名、端口一致），可以直接监听新窗口的load事件，当目标页面加载完成后直接访问DOM：

组件代码修改： #

onSubmitAuthDetails() { 
  console.log('onSubmitAuthDetails'); 
  this.nativeWindow = this.loginService.getNativeWindow(); 
  if (!this.nativeWindow) return; // 兼容SSR场景

  const targetReturnUrl = '//AppLaunch';
  const loginUrl = `${this.userInput}/Login?returnUrl=${targetReturnUrl}&ia=1`;
  const newWindow = this.nativeWindow.open(loginUrl); 

  // 监听新窗口的页面加载完成事件
  const handleWindowLoad = () => {
    // 检查当前URL是否匹配目标returnUrl
    if (newWindow.location.href.includes(targetReturnUrl)) {
      console.log('目标页面已完全加载');
      // 现在可以安全访问新窗口的DOM了
      const targetElement = newWindow.document.getElementById('your-target-element-id');
      if (targetElement) {
        console.log('提取到的元素内容:', targetElement.textContent);
        // 这里可以做后续处理，比如把数据传回父组件
      }
    }
  };

  // 添加监听
  newWindow.addEventListener('load', handleWindowLoad);

  // 监听窗口关闭，清理事件监听避免内存泄漏
  newWindow.addEventListener('unload', () => {
    newWindow.removeEventListener('load', handleWindowLoad);
    console.log('窗口已关闭，资源已清理');
  });

  console.log('Window opened done-'); 
}

服务代码优化（兼容SSR）： #

getNativeWindow(): Window | null { 
  // 避免服务器端渲染时window未定义的错误
  return typeof window !== 'undefined' ? window : null; 
}

方案2：跨域场景下使用postMessage通信 #

如果新窗口和父窗口不同源（比如登录页是第三方域名），同源策略会阻止你直接访问新窗口的DOM。这时候需要让目标页面主动向父窗口发送数据：

步骤1：在returnUrl对应的目标页面中添加代码 #

（需要目标页面的开发权限，或者后端配合注入这段代码）

// 目标页面加载完成后，向父窗口发送数据
window.addEventListener('load', () => {
  const elementContent = document.getElementById('your-target-element-id').textContent;
  // 第二个参数最好指定父窗口的域名（比如"https://your-angular-app.com"），更安全
  window.opener.postMessage({ type: 'DOM_DATA', content: elementContent }, '*');
});

步骤2：在Angular组件中监听message事件 #

// 在组件初始化时添加监听（比如ngOnInit）
ngOnInit() {
  this.nativeWindow = this.loginService.getNativeWindow();
  if (this.nativeWindow) {
    this.nativeWindow.addEventListener('message', this.handleWindowMessage.bind(this));
  }
}

// 处理新窗口发来的消息
private handleWindowMessage(event: MessageEvent) {
  // 验证消息来源，防止恶意数据
  if (event.origin !== 'https://trusted-login-domain.com') return;

  if (event.data.type === 'DOM_DATA') {
    console.log('收到新窗口的DOM数据:', event.data.content);
    // 处理提取到的数据
  }
}

// 组件销毁时清理监听，避免内存泄漏
ngOnDestroy() {
  if (this.nativeWindow) {
    this.nativeWindow.removeEventListener('message', this.handleWindowMessage.bind(this));
  }
}

// 打开窗口的代码保持不变
onSubmitAuthDetails() { 
  console.log('onSubmitAuthDetails'); 
  this.nativeWindow = this.loginService.getNativeWindow(); 
  if (!this.nativeWindow) return;

  const loginUrl = `${this.userInput}/Login?returnUrl=//AppLaunch&ia=1`;
  this.nativeWindow.open(loginUrl); 
  console.log('Window opened done-'); 
}

方案3：轮询检查URL变化（备选方案） #

如果以上两种方案都无法实现，可以用setInterval轮询新窗口的location.href，但要注意及时清理定时器：

onSubmitAuthDetails() { 
  console.log('onSubmitAuthDetails'); 
  this.nativeWindow = this.loginService.getNativeWindow(); 
  if (!this.nativeWindow) return;

  const targetReturnUrl = '//AppLaunch';
  const loginUrl = `${this.userInput}/Login?returnUrl=${targetReturnUrl}&ia=1`;
  const newWindow = this.nativeWindow.open(loginUrl); 

  const checkUrlInterval = setInterval(() => {
    // 检查窗口是否已关闭
    if (newWindow.closed) {
      clearInterval(checkUrlInterval);
      return;
    }
    // 检查URL是否匹配目标
    if (newWindow.location.href.includes(targetReturnUrl)) {
      clearInterval(checkUrlInterval);
      console.log('目标页面已加载');
      // 同源情况下访问DOM，跨域则用postMessage
    }
  }, 500); // 每500ms检查一次

  console.log('Window opened done-'); 
}

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