Angular 4 - 重定向后关闭 iframe答案

【问题标题】：Angular 4 - Close iframe after redirectAngular 4 - 重定向后关闭 iframe
【发布时间】：2017-11-12 18:24:00
【问题描述】：

我有一个 Angular 4 应用程序。我正在使用第三方支付系统（名为 Tranzila）。 Tranzila 使用 iframe 提供了简单的集成。在 iframe 中，用户在 Tranzila 域中执行支付，这节省了我构建表单和处理信用卡号的时间。 Tranzila 让我能够在用户提交请求后配置成功和错误发布请求。我的问题是我想在成功的付款请求后关闭 iframe，并将用户重定向到我网站中的页面（而不是 iframe 内）。我试图找到在请求后关闭 iframe 的最佳方法。由于无法使用 javascript 自定义付款页面，因此我无法在请求成功后操纵他们的页面关闭 iframe。

我想到了 2 个选项： 1.使用 Tranzila 默认的“支付成功”页面，并尝试从我的站点收听 iframe src 更改。 2. 自定义他们的页面以导航到我域中的“付款成功”页面。将路由添加到我的域中的页面，该页面将调用在父级中声明的函数，该函数将关闭 iframe 并导航到成功路由。

目前，我按如下方式实施应用支付订单：

 import { Credentials } from '../_models/credentials.model';

import { CredentialsStorageService } from '../_services/credentials-storage.service';
import { ItemOverview } from '../_models/item-overview.interface';
import { OrderItemsOverview } from '../_models/order-overview.interface';
import { OrderDto } from '../_models/order-dto.model';
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-order-payment',
  templateUrl: './order-payment.component.html',
  styleUrls: ['./order-payment.component.scss']
})
export class OrderPaymentComponent {
  @Input('order')
  public order:OrderDto;

  constructor(private readonly credentials: CredentialsStorageService) {
  //Option 2 - Add function to window. this function will be called from the iframe after loading a special page from my domain which will call parent.paymentSuccess
    window.paymentSuccess = () => {
    //Redirect to success page
     }
  }


  get iframeSrc(): string {
    let userCredentials: Credentials = this.credentials.get();
    return "https://myTranzilaMockUrl.com/iframe.php?sum={0}&currency=1&cred_type=1&orderId={1}&email={2}"
      .format(this.order.price.toString(), this.order.id, userCredentials && userCredentials.email);
  }
  
  //Option 1 - try to listen to iframe source change
  onIframeSrcChange() {
      //if iframe source changed to success page than redirect
  }
  
  
  
  
}

<div class="order-payment-container" *ngIf="order != null">
 <!-- <iframe [src]="iframeSrc | safe" scrolling="no" class="app-tranzila-iframe" ></iframe>-->
</div>

抱歉弄得一团糟，我希望我成功地描述了这个问题。

【问题讨论】：

标签： angular iframe

【解决方案1】：

您应该始终使用他们的“成功”或“失败”回调来处理事务的结束，这是有原因的。

回调并在父页面上执行您需要的任何操作。您还应该考虑使用此页面告诉您的服务器交易的新状态。

【讨论】：