CODEWITHSUNDEEP
javascripthtmliframe
klydra
klydra

Reputation: 153

automatic iframe height from different origin

I've been trying to integrate content of another page with an iframe. This is the best approach of a source-code I could find for this implementation.

<script> 
function resizeIframe(iframe) { 
   iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; 
} 
</script>

<iframe src="https://another-backend-domain.com/bnt" frameborder="0" width="100%" onload="resizeIframe(this)"></iframe>

The problem is here, that the onload function is recognized as cross-origin. With pages on the same domain, this method works just fine...

Uncaught DOMException: Blocked a frame with origin "https://original-website.com" from accessing a cross-origin frame.
    at resizeIframe (https://original-website.com/site/:239:42)
    at HTMLIFrameElement.onload (https://original-website.com/site/:241:112)

I would be glad, if anyone could help me out with this, as even after many hours of research I still can't figure out a good way to fix this. The default height of my iframe is just too small, but I can't manually define the height in px, because the content height is changed hourly...

Upvotes: 2

Views: 1625

Answers (2)

Antonino
Antonino

Reputation: 3268

I would try to fix with this simple snippet taken from this answer, without even the need to insert JavaScript

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com/video" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Upvotes: 0

dzimney
dzimney

Reputation: 552

Check out JavaScript's postMessage function. It allows you to send and receive messages between the iframe and the top window.

Send the message from the iframe with:

window.top.postMessage({type: "myevent", height: x}, *);

Receive the message in the top window with:

window.onmessage = function (event) {
    if (event.data.type && event.data.type == "myevent") {
        var iframeHeight = event.data.height;
    }
};

You can also check event.origin to ensure targetOrigin matches the window domain for additional security.

Upvotes: 1

Related Questions