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.
Pemetto che sono solo un autodidatta e soprattutto un copia/incolla.
Nel sito che curo ho una pagina con iframe che riporta le previsioni meteo con questo iframe fornito da ilmeteo.it :
L’altezza varia a seconda dell’ora del giorno in cui si apre la pagina.
Ho provato la tua soluzione ma non funziona (ho dovuto mettere altezza 600 per non tagliarne una parte)
Ciao Luigino, molto probabilmente il contenuto del tuo iframe carica successivamente al caricamento della pagina esterna. In questo modo è difficoltoso per lo script determinare l’altezza necessaria del contenitore. Credo tu debba cambiare approccio.