Angular 2.0通过iFrame集成支付网关：提交交互需求实现求助

我之前在项目里也碰到过几乎一模一样的问题，不用jQuery完全能搞定，给你几个实用的方案：

方案1：使用postMessage跨页面通信（最优解） #

这是最可靠的方式，前提是你的支付网关支持在用户点击提交按钮时向父页面发送消息（第三方网关大多都有这个配置项，查下他们的文档就行）。

实现步骤： #

1. 在Angular组件中监听message事件，处理来自iframe的消息：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-payment',
  template: `<iframe #paymentFrame src="你的支付网关地址"></iframe>`
})
export class PaymentComponent implements OnInit, OnDestroy {
  private messageListener: EventListener;

  ngOnInit() {
    this.messageListener = (event: MessageEvent) => {
      // 验证消息来源，避免安全风险
      if (event.origin !== '支付网关的域名') return;
      
      // 判断是提交事件的消息
      if (event.data.type === 'payment_submitted') {
        // 显示进度条或弹窗
        this.showProgressIndicator();
      }
    };
    window.addEventListener('message', this.messageListener);
  }

  ngOnDestroy() {
    // 销毁时移除监听，避免内存泄漏
    window.removeEventListener('message', this.messageListener);
  }

  private showProgressIndicator() {
    // 这里写你的进度条/弹窗逻辑，比如控制组件内的变量显示对应UI
    console.log('用户已提交支付请求，显示提示');
  }
}

2. 让支付网关页面在提交按钮点击时发送消息（如果是自己开发的支付页面，添加如下代码；第三方网关找配置项开启即可）：

// 支付网关页面的提交按钮点击事件
document.getElementById('submit-payment').addEventListener('click', () => {
  window.parent.postMessage(
    { type: 'payment_submitted' },
    '你的Angular主页面域名' // 限制接收域名，提升安全性
  );
});

方案2：监听iframe的加载状态变化 #

如果支付网关不支持postMessage，可以利用提交后页面会跳转的特性，监听iframe的load事件来判断支付请求是否已提交。

实现步骤： #

在Angular组件中通过ViewChild获取iframe元素，绑定load事件：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-payment',
  template: `<iframe #paymentFrame src="你的支付网关地址" (load)="onIframeLoad($event)"></iframe>`
})
export class PaymentComponent {
  @ViewChild('paymentFrame') paymentFrame: ElementRef;
  private initialSrc: string;

  ngAfterViewInit() {
    this.initialSrc = this.paymentFrame.nativeElement.src;
  }

  onIframeLoad(event: Event) {
    const iframe = event.target as HTMLIFrameElement;
    // 判断当前iframe的src是否和初始地址不同（说明已跳转，即提交了请求）
    if (iframe.src !== this.initialSrc && !iframe.src.includes('error-page')) {
      this.showProgressIndicator();
    }
  }

  private showProgressIndicator() {
    // 显示进度条/弹窗逻辑
  }
}

注意：这个方案依赖支付网关的跳转逻辑，如果提交后没有跳转页面，可能就不适用了。

方案3：视觉层面的兜底方案（无通信支持时用） #

如果以上两种方案都没法实现，可以在用户进入支付流程时，先在主页面显示一个半透明的覆盖层（带进度条或“请勿返回”的提示），直到收到支付网关的回调通知后再隐藏。

实现示例： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-payment',
  template: `
    <div *ngIf="showOverlay" class="payment-overlay">
      <div class="progress-indicator">
        <p>正在处理支付，请不要返回或刷新页面...</p>
        <!-- 这里可以加Angular Material的进度条或自定义动画 -->
      </div>
    </div>
    <iframe src="你的支付网关地址"></iframe>
  `,
  styles: [`
    .payment-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .progress-indicator {
      background: white;
      padding: 2rem;
      border-radius: 8px;
    }
  `]
})
export class PaymentComponent {
  showOverlay = false;

  ngOnInit() {
    // 进入支付页面时显示覆盖层
    this.showOverlay = true;
  }

  // 假设收到支付完成的回调后调用这个方法
  onPaymentCompleted() {
    this.showOverlay = false;
  }
}

额外提醒： #

• 全程不要用jQuery，Angular本身提供了Renderer2、ViewChild等API来操作DOM，完全可以替代jQuery的功能，而且不会影响Angular的性能。
• 涉及跨域的情况，一定要验证event.origin，避免XSS攻击。

内容的提问来源于stack exchange，提问作者Mehul