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

三世轮回 提交于 2019-12-17 12:06:50

问题


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.


回答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;
}



回答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.




回答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;


来源:https://stackoverflow.com/questions/11806947/is-it-possible-that-iframe-resize-itself-without-help-from-main-window

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!