Angular中跨域iframe内URL追踪及页面刷新后恢复方法问询

由于同源策略限制，直接访问跨域iframe的document或location会触发安全错误，以下是两种可行的解决方案：

方案1：通过代理服务器绕过同源限制 #

搭建代理服务器将外部站点的请求转发到主应用域名下，使iframe与主应用同源，从而可以直接获取iframe的导航URL。

步骤1：配置代理（以Angular开发环境为例） #

在proxy.conf.json中添加代理规则：

{
  "/scroll-help-proxy/*": {
    "target": "https://weblager-user-guide.scrollhelp.site",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/scroll-help-proxy": ""
    }
  }
}

启动Angular时指定代理配置：ng serve --proxy-config proxy.conf.json

步骤2：修改iframe URL生成逻辑 #

优先从本地存储读取保存的URL，转换为代理地址；若无保存地址则使用原逻辑生成代理URL：

iframeSrc = computed(() => {
  const savedUrl = localStorage.getItem('iframeCurrentUrl');
  if (savedUrl) {
    // 将真实URL转换为代理URL
    const proxyUrl = savedUrl.replace(
      'https://weblager-user-guide.scrollhelp.site/',
      '/scroll-help-proxy/'
    );
    return this.sanitizer.bypassSecurityTrustResourceUrl(proxyUrl);
  }

  const selectedLanguage = this.languageStore.selectedLanguage();
  if (selectedLanguage) {
    const proxyUrl = `/scroll-help-proxy/${selectedLanguage.iso639_1}/user-guides/v2/${this.guidePage}`;
    return this.sanitizer.bypassSecurityTrustResourceUrl(proxyUrl);
  }
});

步骤3：监听iframe加载事件保存URL #

通过ViewChild获取iframe实例，监听load事件获取当前URL并保存到本地存储：

import { ViewChild, ElementRef, OnInit, AfterViewInit } from '@angular/core';

// ...

@ViewChild('frame') iframe!: ElementRef<HTMLIFrameElement>;

ngAfterViewInit() {
  this.iframe.nativeElement.addEventListener('load', () => {
    try {
      const currentProxyUrl = this.iframe.nativeElement.contentWindow?.location.href;
      if (currentProxyUrl) {
        // 将代理URL转换为真实URL保存
        const realUrl = currentProxyUrl.replace(
          '/scroll-help-proxy/',
          'https://weblager-user-guide.scrollhelp.site/'
        );
        localStorage.setItem('iframeCurrentUrl', realUrl);
      }
    } catch (err) {
      console.error('获取iframe URL失败:', err);
    }
  });
}

注意：生产环境需要在后端配置代理（如Nginx、Node.js等），确保代理规则生效。

方案2：请求外部站点配合发送postMessage #

如果能联系到外部站点的开发者，可让其在页面导航时通过postMessage向主应用发送当前URL。

主应用监听消息并保存URL #

ngOnInit() {
  window.addEventListener('message', (event) => {
    // 验证消息来源，防止恶意请求
    if (event.origin !== 'https://weblager-user-guide.scrollhelp.site') return;
    
    if (typeof event.data === 'string') {
      localStorage.setItem('iframeCurrentUrl', event.data);
    }
  });
}

修改iframe初始化逻辑 #

同方案1，优先读取本地存储的URL作为iframe的src。

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