在 iframe 中运行的 Angular 应用程序之外检测点击

Question

我正在开发一个嵌入在 Wordpress 页面中的 Angular 应用程序。 我正在使用 iframe 将 Angular 应用程序嵌入 Worpress 页面。 现在我的 Angular 应用程序中有模态对话框，在对话框外单击时应将其关闭。 当单击发生在对话框外部和 Angular 应用程序内部时，效果很好。 但是，当点击甚至超出 iframe，即 wordpress 页面上的其他地方时，什么也没有发生。 似乎 iframe 事件处理程序无法识别 iframe 之外的所有点击。
我找到了 Javascript 的一些解决方案，其中 iframe 之外的页面是通过document.parentElement引用的。 就我而言，这似乎不起作用，我文档的 parentElement 是undefined 。
我希望你明白我的问题是什么，提出一个正在运行的例子会很费力。

提前致以问候和感谢！

Answer 1

感谢@Msk Satheesh 和@MikeOne，结合你们两个的提示，我让它运行起来了！
问题是我真的可以通过window.parent寻址（外部）wordpress 页面。 但这只有效，因为两者都在同一个域中运行。 结合 Msk Satheesh 在他的第一条评论中发布的代码，它起作用了。 而且我什至不需要在 Angular 之外运行任何东西。在 Angular 的模态对话框组件中，我输入了以下代码：

  constructor(public dialogRef: MatDialogRef<ResultsDialogComponent>, private eRef: ElementRef) {}
  
  ngOnInit(): void {
    if(!this.onDocumentClickFunction){
      this.onDocumentClickFunction = this.onDocumentClick.bind(this);
    }
    window.parent.addEventListener( 'click', this.onDocumentClickFunction ); 
  }

  onDocumentClick() {    
    this.dialogRef.close();
    this.eRef.nativeElement.click();
  }

  ngOnDestroy() {
    window.parent.removeEventListener( 'click', this.onDocumentClickFunction ); 
  }

就是这样。 优雅的是onDocumentClick()仅在点击在 iFrame 之外时触发。这意味着我不需要额外的逻辑来确定点击是在 iFrame 的内部还是外部this.eRef.nativeElement.click();行this.eRef.nativeElement.click(); 有必要将焦点带回 iFrame。如果没有该行，只有当用户自己点击 iFrame 时，模式才会消失。

Answer 2

尝试使用：

Angular 组件

   constructor(private zone:NgZone) {
       window['clickEvent'] = (event) => {
           zone.run(() => {
               console.log(event);
           });
       };
   }

外部 Js：

onClickEvent(event){
     window.parent.frames[#frameId].clickEvent(event);
}