如何从作为iframe嵌入父应用的Angular子应用访问父DOM元素？

1. 先尝试让父子应用同源（最省心的方案） #

如果能把子应用部署到和父应用相同协议、域名、端口下，同源策略就不会限制你访问父DOM，直接用你原来的代码就行：

const parentBody = window.parent.document.querySelector('body');
parentBody.style.backgroundColor = '#f0f0f0';

本地开发时，调整子应用的启动端口和父应用一致，比如都用4200，就能绕开跨域错误。

2. 让父应用主动提供操作接口（安全可控） #

别直接碰父DOM，让父应用在全局挂载专门的样式修改方法，子应用只需要调用这些方法就行，既安全又符合规则：

• 父应用全局（比如根组件或index.html里）写：

window.setParentStyle = function(selector, styles) {
  const element = document.querySelector(selector);
  if (element) {
    Object.assign(element.style, styles);
  }
};

• 子应用Angular组件里调用：

ngAfterViewInit() {
  if (window.parent?.setParentStyle) {
    window.parent.setParentStyle('body', { backgroundColor: 'lightblue', color: '#333' });
  }
}

3. 用PostMessage跨域通信（跨域场景下的标准玩法） #

子应用发消息给父应用，父应用收到消息后自己去改DOM，这是跨域场景下的官方解决方案：

• 子应用组件代码：

ngAfterViewInit() {
  window.parent.postMessage({
    type: 'UPDATE_STYLE',
    selector: 'body',
    styles: { backgroundColor: 'coral', padding: '20px' }
  }, '*'); // 生产环境一定要换成父应用的具体域名，比如'http://parent-app.com'
}

• 父应用全局加监听：

window.addEventListener('message', (event) => {
  // 生产环境必须校验来源，只认你信任的子应用域名
  if (event.origin !== 'http://192.168.1.7:4200') return;
  
  if (event.data.type === 'UPDATE_STYLE') {
    const { selector, styles } = event.data;
    const element = document.querySelector(selector);
    if (element) Object.assign(element.style, styles);
  }
});

4. 本地调试临时绕开（仅限开发用） #

如果只是本地测试，可以启动Chrome时加参数关闭同源策略：

chrome.exe --disable-web-security --user-data-dir=C:\MyChromeDevUserData

注意：这个方法绝对不能用在生产环境，会带来严重安全隐患

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