Premetto che non sono un amante degli iframe (non più almeno) perché oltre ad essere deprecati nell’HTML5 fanno sembrare il sito più vecchio di almeno 6-7 anni dando un’idea di poca professionalità. Inoltre gli iframe sono stati creati per visualizzare pagine esterne al proprio sito web, all'interno dello stesso anche se spesso sono stati usati in maniera errata. Quindi si se si vogliono usare per includere pagine esterne, no per quelle interne meglio usare altri metodi come include, o jquery).
Dopo questa lunga e doverosa premessa passiamo ai fatti. Chi usa il tag iframe spesso ha la necessità di adattarne l’altezza in base al contenuto che viene caricato. I metodi che si trovano in rete sono molti ed io voglio qua proporre la mia personale soluzione in pochissime righe di codice: leggo l’altezza dell tagdel contenuto che carico e tramite jquery assegno l’altezza all’ iframe.
Certo posso scegliere anche il tago altro ma in questo mio esempio preferisco usarevisto che tutto il contenuto visibile in una pagina è racchiuso lì dentro.
Definiamo lo stile per il nostro iframe tramite css:
#mioiframe { width:100%; border:#293343 1px solid; height:300px; }
Scriviamo il nostro iframe.
<iframe src="pg.html" id="mioiframe" class="mioiframe" scrolling="no" frameborder="0" name="contenuto" onload="caricato()"></iframe>
Definiamo il nostro script che verrà chiamato al caricamento del contenuto dell’iframe:
function caricato() {
var mioif = $("#mioiframe").contents().find("body");
var h = mioif.height();
$("#mioiframe").height(80+h+"px");
};
Infine la chiamata alle pagine:
<a href="pg1.html" target="contenuto" class="menu"> pagina 1 </a>
<a href="pg2.html" target="contenuto" class="menu"> pagina 2 </a>
Come si vede è tutto molto semplice, veloce e leggero…