通过iFrame

Question

借助我们的Angular 2框架，我们使用iframe与支付网关集成。集成工作正常。

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

虽然我们不想使用JQuery，但无论如何我们都试过了。但是，这会影响应用程序的性能。

有关如何实施此建议的任何建议？

Answer 1

    <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");
  }
}