DokuWiki

It's better when it's simple

User Tools

Site Tools


Sidebar

Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community


Follow us on Facebook, Twitter and other social networks.

tips:resizeiframes

Resize IFrames according to their contents

If you want to have IFrames integrated with the iframe plugin to have a height matching their content you can paste the following into a lib/plugin/iframe/script.js:

Note this only works with content served from the same server.

This version is compatible with Adora Belle and earlier versions of DokuWiki. See below for Weatherwax and later.

function resizeIframe(currentfr){
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight){
        //ns6 syntax
        currentfr.height = 50+currentfr.contentDocument.body.offsetHeight;
        currentfr.style.height = (50 + currentfr.contentDocument.body.offsetHeight) + 'px';
    } else if (currentfr.document && currentfr.contentWindow.document.body.scrollHeight){
        //ie5+ syntax
        currentfr.height = 50+currentfr.contentWindow.document.body.scrollHeight;
        currentfr.style.height = (50 + currentfr.contentWindow.document.body.scrollHeight)+'px';
    }
    currentfr.style.display = 'block';
}
 
addInitEvent(function(){
    var frames = document.getElementsByTagName('iframe');
    for(var i=0; i<frames.length; i++){
        var currentfr = frames[0];
        addEvent(currentfr,'load',function(){resizeIframe(currentfr);});
        resizeIframe(currentfr);
    }
});

Weatherwax

Here are the changes needed for Weatherwax and later versions of DokuWiki:

script.js
// from https://www.dokuwiki.org/tips:resizeiframes
function resizeIframe(currentfr){
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight){
        //ns6 syntax
        currentfr.height = 50+currentfr.contentDocument.body.offsetHeight;
        currentfr.style.height = (50 + currentfr.contentDocument.body.offsetHeight) + 'px';
    } else if (currentfr.document && currentfr.contentWindow.document.body.scrollHeight){
        //ie5+ syntax
        currentfr.height = 50+currentfr.contentWindow.document.body.scrollHeight;
        currentfr.style.height = (50 + currentfr.contentWindow.document.body.scrollHeight)+'px';
    }
    currentfr.style.display = 'block';
}
 
// next line replaced for compatibility with Weatherwax as per https://www.dokuwiki.org/devel:jqueryfaq?s[]=addinitevent [Rik, 2013-10-17] 
//addInitEvent(function(){
jQuery(function(){
    var frames = document.getElementsByTagName('iframe');
    for(var i=0; i<frames.length; i++){
        var currentfr = frames[0];
 
        // replaced next line for compatibility with Weatherwax as per https://www.dokuwiki.org/devel:jqueryfaq?s[]=addevent [Rik, 2013-10-18]
        //addEvent(currentfr,'load',function(){resizeIframe(currentfr);});
        jQuery(currentfr).load(function(){resizeIframe(currentfr);});
        resizeIframe(currentfr);
    }
});
tips/resizeiframes.txt · Last modified: 2013-10-18 20:33 by 128.189.112.247