is it possible that iframe resize itself without h

2020-01-29 08:08发布

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.

3条回答
走好不送
2楼-- · 2020-01-29 08:26

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;
}
查看更多
做自己的国王
3楼-- · 2020-01-29 08:28

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;
查看更多
看我几分像从前
4楼-- · 2020-01-29 08:37

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.

查看更多
登录 后发表回答