Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 427
rsk82 Avatar asked Aug 04 '12 07:08

rsk82


People also ask

What is iframe resizer?

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.


1 Answers

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;
}
like image 102
Teemu Avatar answered Sep 26 '22 07:09

Teemu