Angular不使用route navigate时跨不可控页面返回原页方案咨询

能不能实现自动回跳，核心取决于无管控权限的page2是否开放了回跳相关的配置能力，不存在可以单方面强制第三方页面按要求跳转的通用方案，浏览器同源策略从安全层面直接堵死了这类未授权跨域操作的可能。 #

可落地的实现场景 #

• page2支持自定义回跳地址参数
  这是最常见也最稳定的方案。绝大多数第三方业务页（比如支付、授权、表单提交类页面）都会预留redirect_url、return_url这类查询参数位，你从page1跳转到page2的时候，把当前page1的地址编码后拼到page2的跳转链接里即可，page2完成自身业务逻辑后会自动读取这个参数地址跳转回来。
  示例跳转代码：

  // page1内按钮点击的跳转逻辑
  const currentPage1Url = encodeURIComponent(window.location.href);
  // 不依赖Angular路由，直接用原生window对象跳转
  window.location.href = `https://page2.com/task?redirect_url=${currentPage1Url}`;
  

• page2支持postMessage跨页通信
  如果page2和你约定了业务完成后会向打开它的源页面发送指定消息，你可以在page1初始化时绑定message事件监听，识别到业务完成的消息后做对应处理即可。注意跨域场景下这个能力必须page2侧主动实现，你单方面没法监听page2的内部操作。
  示例监听代码：

  // page1组件的ngOnInit生命周期中添加监听
  ngOnInit(): void {
    window.addEventListener('message', (event) => {
      // 必须校验消息来源，防止恶意站点伪造消息
      if (event.origin !== 'https://page2.com') return;
      if (event.data?.eventType === 'TASK_COMPLETED') {
        // 如果是新窗口打开的page2，这里可以直接做回跳后的业务处理；如果是同窗口跳转page2，page1已经被卸载，这段逻辑不会触发
        console.log('page2业务执行完成');
      }
    })
  }
  

• 同域下的新窗口轮询检测
  如果page2和page1同域，你可以用window.open打开新窗口加载page2，在page1里加定时器轮询新窗口的地址或者业务状态，检测到完成就触发回跳。但跨域场景下这个方法完全无效，浏览器会拦截你读取跨域窗口的所有属性。

无法实现的情况 #

如果page2既不支持自定义回跳参数，也没有主动提供跨页通信能力，没有任何取巧方案能实现自动回跳。

不要尝试用iframe嵌套page2来监听状态，绝大多数第三方业务页都会配置X-Frame-Options响应头禁止被第三方嵌套，强行使用会直接报安全错误。

这种场景只能联系page2的维护方协调加回跳逻辑，没有绕过浏览器安全规则的黑科技。 #

内容的提问来源于stack exchange，提问作者Manikya Rathna Shetty