如何以角度在 I-Frame 和父窗口之间进行通信答案

【问题标题】：How to do communication between I-Frame and parent window in angular如何以角度在 I-Frame 和父窗口之间进行通信
【发布时间】：2021-11-15 01:08:51
【问题描述】：

任何建议如何使 iframe 与父窗口通信。场景：

在 Iframe 内部，同一域中的单独网站具有多个链接。当用户点击 iframe 内的链接时，该值应传播到父窗口。

我尝试跟踪 iframe 中的点击事件并获取 iFrame.src 但它没有工作。

HTML：

 <iframe #Iframe class="iframek" (click)="onChange(kIframe)" sandbox="allow-same-origin allow-scripts allow-top-navigation" id="iframe_k"   [src]='safeUrl' scrolling="auto" frameborder="0" allowfullscreen=true wmode="transparent" name="kiframe"></iframe>

onChange(iframe) {
  console.log("onchange");
  if(iframe.contentWindow)
  {
    console.log(iframe.contentWindow.document);
  }
  else{
    console.log(iframe.contentWindow);
  }
  
  console.log(iframe.getAttribute('src'));
  
}

【问题讨论】：

看看这个答案：stackoverflow.com/a/16657480/4633925 对于相同的域 iframe，您不需要发布消息。您可以访问 iframe，反之亦然。

标签： javascript iframe angular10

【解决方案1】：

你应该使用cross-origin communication between Window objects。

详情请参阅此答案：How to communicate between iframe and the parent site?。

要实施您的方案，请执行以下操作：

跟踪 iframe 中锚点上的所有点击事件
点击后，读取点击锚点的 href 属性，并使用 window.postMessage() 将其发送到父窗口（记得在点击事件上调用 preventDefault() 以防止在 iframe 内导航）
在父窗口中接收事件并导航

【讨论】：