is it possible that iframe resize itself without help from main window?

Question

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.

Answer 1

You can do this also without knowing the idof 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;
}

Answer 2

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.

Answer 3

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;