文章/答案/技术大牛

发布

问具有角的动态iframe源
EN

Stack Overflow用户

提问于 2018-11-16 19:02:17

回答 1查看 2.4K关注 0票数 0

我试着用有角的支付系统。在支付网关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>

javascript

angular

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-16 19:48:46

使用以下代码片段-

@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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53343911

复制

相似问题

问具有角的动态iframe源
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有角的动态iframe源EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有角的动态iframe源
EN