DokuWiki

It's better when it's simple

User Tools

Site Tools


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

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki