Adattare un iframe all’altezza del suo contenuto

A volte può darci fastidio il non conoscere l’esatta misura da usare per un iframe

Soprattutto se si tratta di template responsive, l’inserimento di un iframe può rivelarsi molto fastidioso. Tra le sue opzioni c’è la possibilità di eliminare i bordi, gli scrolling, ma resta il fatto che l’iframe non ha l’opzione nativa per poter adattare la sua altezza a quella del contenuto che sta visualizzando.

Questo però non significa che non esistano soluzioni per renderlo dinamico, perché grazie a javascript e ad un codice come questo esempio

<script>
function adattaIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>

Possiamo adattare l’altezza al contenuto dopo il caricamento del contenuto stesso, aggiungendo l’attributo onload come in questo esempio

<iframe src="https://url_della_pagina.php"
frameborder="0"
width="100%"
scrolling="no"
onload="adattaIframe(this)">
</iframe>

In questo modo la nostra pagina verrà caricata come di solito, con la differenza che l’iframe ridimensionerà la sua altezza appena il suo contenuto sarà caricato.

Condividi se l'articolo ti è piaciuto, ci aiuterai a crescere

Francesco

Fondatore e amministratore di Dummy-X dal 2007, condivido interessi, idee, progetti, e soluzioni informatiche. Non vendo prodotti, mi limito a descrivere tecnologie e a mettere a disposizione gli strumenti adatti per poter realizzare idee. Tutto ciò che scrivo è frutto della mia esperienza lavorativa e della mia voglia di imparare. Da sempre studio l'informatica in tutte le sue angolazioni (software, hardware, reti e sicurezza) e negli ultimi anni mi sono specializzato nello sviluppo di web applications. Sono sempre aperto a nuove sfide e alla ricerca e conoscenza delle nuove tecnologie.
 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *