如何检测打开Angular应用的来源窗口URL？

当然可以啦！在Angular里想要知道应用的打开来源，主要得借助浏览器原生的API（毕竟Angular本身也是运行在浏览器环境中的）。下面分两种常见场景给你说明具体实现方式：

1. 处理通过window.open()打开的情况 #

如果你的Angular应用是被另一个窗口通过window.open()方法唤起的，那可以用浏览器提供的window.opener对象来获取发起调用的窗口信息。

在Angular组件里，你可以这样写：

import { Component, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    // 获取来源窗口的引用
    const openerWindow = window.opener;
    
    if (openerWindow) {
      try {
        // 同源场景下能拿到完整的来源URL
        const sourceUrl = openerWindow.location.href;
        console.log('发起调用的窗口URL:', sourceUrl);
      } catch (error) {
        // 跨域时浏览器会抛出安全错误，这时候拿不到详细信息
        console.log('跨域来源无法获取具体URL，受同源策略限制');
      }
    } else {
      console.log('当前窗口不是通过其他窗口的window.open打开的');
    }
  }
}

这里要注意：

• 只有当来源窗口和你的Angular应用同源（协议、域名、端口完全一致）时，才能完整获取到来源窗口的URL；跨域情况下，浏览器的同源策略会阻止你访问这些敏感信息，此时会触发SecurityError。
• 如果用户在新窗口刷新了你的应用，window.opener还会保留，但要是来源窗口被关闭了，window.opener就会变成null。

2. 处理普通链接跳转的情况 #

如果用户是通过其他页面的链接（比如<a>标签）跳转到你的Angular应用，那可以用document.referrer来获取来源页面的URL。

具体实现示例：

import { Component, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    const referrerUrl = this.document.referrer;
    if (referrerUrl) {
      console.log('来源页面URL:', referrerUrl);
    } else {
      console.log('没有来源信息——可能是用户直接输入地址、刷新页面，或者跨域跳转被浏览器隐藏了referrer');
    }
  }
}

这里的注意点：

• document.referrer的行为取决于浏览器和用户的隐私设置：如果用户直接在地址栏输入URL、刷新页面，或者跨域跳转时浏览器出于安全考虑隐藏了referrer，这个值就会是空字符串。
• 部分浏览器在跨域跳转时，可能只会返回来源的域名，而不是完整的URL，具体要看浏览器的隐私策略。

额外提醒 #

• 如果你用了Angular Universal（服务器端渲染），直接访问window对象会报错，这时候要先判断是否在浏览器环境中：

if (typeof window !== 'undefined') {
  // 在这里安全访问window.opener或其他浏览器API
}

• 不管是window.opener还是document.referrer，都没法保证在所有场景下都能拿到来源信息——毕竟浏览器的隐私保护机制和用户的操作都会影响结果。

内容的提问来源于stack exchange，提问作者Oscar Castaño