Angular应用嵌入iframe时如何获取查询参数？

情况1：查询参数在iframe的src链接中 #

如果你的iframe是通过带参数的URL嵌入（比如 <iframe src="https://your-angular-app.com?foo=bar&baz=123"></iframe>），可以用以下两种方式获取：

• 直接解析当前窗口URL
  跳过Angular路由，直接读取iframe自身的URL参数：

const queryParams = new URLSearchParams(window.location.search);
const foo = queryParams.get('foo'); // 输出"bar"
const baz = queryParams.get('baz'); // 输出"123"
console.log(queryParams);

• 调整ActivatedRoute的订阅目标
  如果坚持用Angular路由API，直接订阅根路由的查询参数（子路由可能无法捕获全局URL参数）：

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.root.queryParams.subscribe(params => {
    console.log(params);
  });
}

情况2：查询参数在父页面的URL中 #

如果参数是在嵌入iframe的父页面URL上（比如父页面为 https://parent-page.com?foo=bar），分两种场景处理：

• 同源场景
  直接获取父页面的URL并解析：

if (window.parent) {
  const parentUrl = new URL(window.parent.location.href);
  const queryParams = parentUrl.searchParams;
  const foo = queryParams.get('foo');
  console.log(queryParams);
}

• 非同源场景
  由于浏览器跨域限制，需要父页面主动通过postMessage传递参数：
  父页面代码：

  const iframe = document.getElementById('target-iframe');
  iframe.contentWindow.postMessage(
    { queryParams: { foo: 'bar', baz: 123 } },
    'https://your-angular-app.com' // 限定消息接收源
  );
  

  Angular应用代码：

  import { HostListener } from '@angular/core';
  
  @Component({/* 组件配置 */})
  export class YourComponent {
    @HostListener('window:message', ['$event'])
    onMessage(event: MessageEvent) {
      // 验证消息来源，避免恶意数据
      if (event.origin !== 'https://parent-page.com') return;
      const queryParams = event.data.queryParams;
      console.log(queryParams);
    }
  }
  

额外排查点 #

• 若Angular用Hash路由模式（URL带#），window.location.search会为空，需解析hash部分：

const hashParams = new URLSearchParams(window.location.hash.slice(1));
const foo = hashParams.get('foo');

• 检查iframe的src是否正确携带了参数，避免嵌入时参数遗漏

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