Интеграция Angular 2.0 с платежным шлюзом через 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");
  }
}