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 no
For same-origin content like yours, yes you can.
To borrow from Gary's answer on the above question:
In the iframe, window.parent refers to the global object of the parent document, not the document object itself. I believe you would need to use parent.document.getElementById
Try accessing the iframe using parent.document, and see if this solves your issue.
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;
}
Assuming you have only 1 IFRAME in the main window, from the Javascript of the IFRAME's document you can do something like:
function getMySelf()
{
return (window.parent.document.getElementsByTagName("iframe"))[0];
}
var myself = getMySelf();
myself.style.width = whateverWidth;
myself.style.height = whateverHeight;