Angular 2.0通过iFrame与支付网关集成

通过Angular 2框架，我们使用

iframe

集成了支付网关。整合效果很好

但是，在输入卡片详细信息后，当用户单击submit按钮时，我们希望显示一个进度条（或一个弹出窗口，其中提到不要单击back按钮）。我们正在努力解决这个问题，因为主页无法控制

iframe

中的事件

尽管我们不想使用JQuery，但还是尝试了。但是，这会影响应用程序的性能

有没有关于如何实施的建议

    <iframe *ngIf="currentFrameUrl" id="contentFrame" [src]="currentFrameUrl | safe" #iframe></iframe>

    export class ContentFrameComponent implements OnInit {
  currentFrameUrl: string;
  currentMenuState: boolean;
  @ViewChild('iframe') iframe: ElementRef;

  constructor(private frameService: ContentFrameService) {
    this.currentMenuState = true;
  }

  ngOnInit(): void {
    this.frameService.providerCurrentUrl$.subscribe(data => this.currentFrameUrl = data);
    this.frameService.providerMenuState$.subscribe(data => this.currentMenuState = data);
  }

  ngAfterViewInit() {
    let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
    if (typeof doc.addEventListener !== undefined) {
      doc.addEventListener("click", this.iframeClickHandler, false)
    } else if (typeof doc.attachEvent !== undefined) {
      doc.attachEvent("onclick", this.iframeClickHandler);
    }
  }

  iframeClickHandler() {
    alert("Iframe clicked");
  }
}