Both main window and iframe are on the same domain, but what I want to achieve is to resize iframe to fit its contents using js only within that iframe.
I also do not know the id of the iframe that is assigned to it by main window. And I do not want to use jquery or any other framework for it.
This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include: Height and width resizing of the iFrame to content size.
You can do this also without knowing the id
of the iframe
in the parent window:
window.frameElement.style.width = iframeContentWidth + 'px';
window.frameElement.style.height = iframeContentHeight + 'px';
See frameElement
at MDN.
EDIT
Just in case the iframe
happens to be in a container element which has fixed size and overflow: hidden
you can do something like this:
function resizeIframe (iframeContentWidth, iframeContentHeight) {
var container = window.frameElement.parentElement;
if (container != parent.document.body) {
container.style.width = iframeContentWidth + 'px';
container.style.height = iframeContentHeight + 'px';
}
window.frameElement.style.width = iframeContentWidth + 'px';
window.frameElement.style.height = iframeContentHeight + 'px';
return;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With