FILOWEB.IT:
Tutorials e script

 
Home Menu Gallery Roberto Contatti
 

Iframe ad altezza variabile

Per vedere lo script in azione premi qua

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…

Contenuti


↑ Top ↑

G+ FB TW whatsapp RSS FEED

LISTA TUTORIALS

Iframe ad altezza variabile
Sistema di schede simile a google news
CREARE UN LIGHTBOX RESPONSITIVE PERSONALIZZATO
ANIMAZIONI CON JQUERY
CREARE UN SISTEMA SOLARE CON 3 PIANETI

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.