Question

我正试图在Angular中使用支付系统。在支付网关API中，3D安全页面在json中以html形式公开。我正在尝试将此HTML放入iframe。主要问题是html未显示。当我尝试在浏览器上检查元素时，iframe中有html代码，但未显示。是什么原因呢？我该怎么解决？

payment.component.ts：

this.applicationService.pay(this.card).subscribe((data: any) => {
    this.modalContent = data.content;
}

payment.component.html

<iframe [innerHTML]="modalContent | sanitizeHtml" frameborder="0"></iframe>

3d安全内容示例：

<!doctype html>↵<html lang="en">↵<head>↵    <title>iyzico Mock 3D-Secure Processing Page</title>↵</head>↵<body>↵<form id="iyzico-3ds-form" action="https://sandbox-api.iyzipay.com/payment/mock/init3ds" method="post">↵    <input type="hidden" name="orderId" value="mock64-7127975743472898iyziord">↵    <input type="hidden" name="bin" value="405418">↵    <input type="hidden" name="successUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/success/37">↵    <input type="hidden" name="failureUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/failure/37">↵    <input type="hidden" name="confirmationUrl" value="https://sandbox-api.iyzipay.com/payment/mock/confirm3ds">↵    <input type="hidden" name="PaReq" value="66e28140-1079-4f29-81c6-0220c720620e">↵</form>↵<script type="text/javascript">↵    document.getElementById("iyzico-3ds-form").submit();↵</script>↵</body>↵</html>

Answer 1

使用以下代码段-

ts

@ViewChild('iframe') iframe: ElementRef;

this.applicationService.pay(this.card).subscribe((data: any) => {
    this.setIframe(this.iframe);
}

private setIframe(iframe: ElementRef): void {
   const win: Window = iframe.nativeElement.contentWindow;
   const doc: Document = win.document;
   doc.open();
   doc.write(this.modalContent);
   doc.close()
}

html

<iframe #iframe frameborder="1"></iframe>

工作副本在这里-https://stackblitz.com/edit/angular-jc3qew

具有角度的动态iframe源

1 个答案:

ts

html