Динамический источник iframe с угловым - PullRequest
Новая
       1

Динамический источник iframe с угловым

0 голосов
/ 16 ноября 2018

Я пытаюсь использовать платежную систему с Angular. В API платежного шлюза 3D Secure Page отображается в виде html в json. Я пытаюсь поместить этот 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>

1 Ответ

0 голосов
/ 16 ноября 2018

Используйте следующий фрагмент кода -

ц 

@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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...