Aggiustare l’altezza di un iframe con JavaScript

Roger Johansson, una delle migliori voci scandinave in tema di sviluppo Web professionale, ha recenetemente proposto in un suo articolo (“How to adjust an iframe element’s height to fit its content“) un semplice procedura per aggiustare l’altezza di un iframe utilizzando JavaScript; l’idea di base riguarda le modalità per adottare un iframe al suo contenuto nel momento in cui si desideri consentire la visualizzazione di risorse provenienti da piattaforme esterne.

Di seguito propongo il codice relativo alla soluzione adottata dall’autore:

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
};

In pratica, nel codice proposto il parametro “iframe” non è altro che una referenza dell’elemento iframe del quale si desidera impostare l’altezza; l’evento “window.onload” permetterà poi di verificare che ogni elemento che possa avere effetto sull’altezza dell’iframe sia stato caricato:

window.onload = function () {
setIframeHeight(document.getElementById('your-frame-id));
};

A corredo dell’articolo è disponibile anche una demo funzionante su tutti i browser compatibili.