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

【问题标题】：Angular 2.0 integration with Payment gateway via iFrameAngular 2.0 通过 iFrame 与支付网关集成
【发布时间】：2018-05-23 05:01:46
【问题描述】：

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

但是，在输入卡片详细信息后，当用户单击提交按钮时，我们希望显示一个进度条（或弹出提示不要单击返回按钮）。由于主页无法控制iframe 中的事件，因此我们正在为此苦苦挣扎。

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

关于如何实现这个有什么建议吗？

【问题讨论】：

标签： angular payment-gateway

【解决方案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");
  }
}

【讨论】：