JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="iframe-container">
    <iframe scrolling="no" data-src="https://localhost:9443/psp-ui/app_dev.php/accounts/de_DE/payment-data/list" src="about:blank" class="iframe-content"></iframe>
</div>

CSS

/*
## Responsive iframes
*/
 .iframe-container {
    position: relative;
}
.iframe-content {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

//script is merely an example, you have to change and add some code to make it work cross-browser!
(function () {
    //get the iframe and its data-src
    var bovIframe = document.querySelectorAll('iframe.iframe-content')[0],
        realSrc = bovIframe.dataset.src;

    //add onload event to the iframe
    bovIframe.addEventListener('load', function () {
        console.log('do some stuff here if you like');
    }, false);

    //postmessage event listener
    window.addEventListener('message', function (event) {
        //check for origin when you implement this :)
        //see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
        //if (event.origin !== "http://example.com"){
        //return;
        //}
        try {
            bovIframe.parentElement.style.height = JSON.parse(event.data).parameters.height + 'px';
        } catch (e) {}
    });

    //set source to fix iframe caching bug in firefox 
    //see https://bugzilla.mozilla.org/show_bug.cgi?id=402565
    bovIframe.src = realSrc;

})();