Member index
Come includere il contenuto di un file esterno
Visita anche Risorse per i webmasterarchivio di risorse per la creazione di pagine web
Sommario:
Questa pagina è parte della guida Come creare un sito da zeroCome includere contenuti tramite iframe:
Questo è il modo classico per aggiungere contenuti esterni in una pagina del sito.Un iframe è come una finestra aperta in una pagina che mostra il contenuto di un'altra pagina.
Tramite un iframe, quindi, è possibile inserire in una pagina html un'altra pagina html ed è possibile anche inserire una pagina di un altro sito web da un altro dominio, se non contiene impostazioni che non lo permettono.
Con un iframe, a differenza di altri metodi, è possibile importare una pagina html anche da un dominio esterno se non ci sono apposite regole di blocco.
L'operazione è semplice, basta prelevare l'indirizzo del file.html e inserirlo nel codice dell'iframe, regolando, naturalmente, le dimensioni.
<iframe width="100%" height="600" style="border: 0; display: block; border-width: 0;" src="file.html">
</iframe>
</iframe>
L'iframe dovrà essere inserito nella sezione <body> del codice della pagina, nel punto dove si desidera far apparire l'anteprima, o in un contenitore specifico.
Come rendere gli iframe responsive anche in altezza
Gli iframe non sono responsive in altezza. Per renderli tali, bisogna utilizzare queste regole di stile applicate ad un contenitore e all'iframe stesso.
<style>
.container {
position: relative;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
.container {
position: relative;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
In alternativa, è possibile utilizzare uno script: Adjust Iframes script.
Per il caricamento degli iframe e la velocità della pagina leggi anche: Velocità e performance di un sito web
Disabilitare lo scroll dell'iframe
Per impedire lo scroll dell'iframe con il mouse, si usava la regola inline scrolling="no". Questa regola è, ora, considerata obsoleta e causa errore nella validazione del codice. Molti consigliano di usare la regola di stile overflow:hidden associata a pointer-events:none. Purtroppo, questa soluzione non è supportata da tutti i browser.Come fare?
Per fortuna, le regole indicate in precedenza per rendere l'iframe responsive in altezza sono efficaci anche per disabilitare lo scroll.
Come includere contenuti usando javascript:
Con javascript è possibile includere qualunque contenuto. Facciamo un esempio per includere il menù di navigazione.
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="pagina1.html">Pagina 1</a></li>
<li><a href="pagina2.html">Pagina 2</a></li>
<li><a href="pagina3.html">Pagina 3</a></li>
</ul>
<li><a href="home.html">Home</a></li>
<li><a href="pagina1.html">Pagina 1</a></li>
<li><a href="pagina2.html">Pagina 2</a></li>
<li><a href="pagina3.html">Pagina 3</a></li>
</ul>
Questo è il codice html da mettere dove deve apparire il meù.
<div id="content1"></div>
Al posto di "content1" va messo l'ID del div (o altro contenitore) che deve contenere l'html.
Questo è il codice javascript da mettere nel file esterno (es: menu.js).
document.getElementById('content1').innerHTML = 'contenuto html';
Al posto di "contenuto html" va inserito il contenuto html che apparirà nella pagina. Nel caso dell'esempio che abbiamo preso, sarà il menù, in questo modo:
document.getElementById('content1').innerHTML ='<ul><li><a href="home.html">Home</a></li><li><a href="pagina1.html">Pagina 1</a></li><li><a href="pagina2.html">Pagina 2</a></li><li><a href="pagina3.html">Pagina 3</a></li></ul>';
Attenzione: il codice html va scritto tutto di seguito, non si può andare a capo.
Il file esterno menu.js verrà richiamato nella pagina html con questa stringa da mettere prima della chiusura </body>:
<script src="menu.js"> </script>
Ecco fatto! Ripetete questo in ogni pagina del sito e, ogni volta che vorrete modificare, o aggiornare il menù di navigazione del sito, non avrete che da modificare il contenuto del menu.js.
Come includere contenuti usando jQuery load() Method:
Che cos'è jQuery?
Citazione: "jQuery è una libreria JavaScript che semplifica l’attraversamento dei documenti HTML, la gestione degli eventi, le animazioni e le interazioni AJAX per migliorare e velocizzare lo sviluppo web. La sua sintassi semplificata permette di approcciare a javascript con relativa semplicità e di realizzare interfacce user friendly in modo efficace." (Fonte)Per inserire la libreria jQuery dovete andare sul sito di jQuery e avete due scelte:
- Potete scaricare la versione corrente di jQuery da includere.
- Potete prelevare il link di inclusione che viene offerto (comprensivo degli attributi di integrità e di origine) e caricare la libreria in CDN.
Es: <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="xxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>
NOTA: Non tutte le versioni di jQuery sono adatte alle differenti applicazioni, soprattutto quando si tratta di applicazioni datate. Il collegamento alla libreria jQuery può essere messo a fondo pagina, prima della chiusura di </body>, come pure gli script che da essa dipendono. In questo modo, la velocità di caricamento della pagina non ne risentirà.
Per maggiori informazioni, leggi anche la sezione dedicata alle librerie nella guida La pagina perfetta.
Questo metodo è davvero di una semplicità estrema e offre la possibilità di modificare specifici contenuti delle pagine senza dover lavorare su ogni singola pagina.
NOTA: si possono includere solo contenuti html e regole css. Non è possibile includere script, o richiami a script.
Mostro, come esempio di base, l'inclusione della sezione "nav" nelle pagine del sito.
Preparate, nella root del sito, un file html, che chiamerete (per l'esempio) nav.html. In questo file, incollate tutta la sezione nav che contiene il menù, con i suoi tag di chiusura e apertura (<nav></nav>).
In fondo alle pagine in cui volete includere il menu di navigazione, naturalmente, ci dovrà essere il collegamento alla libreria jQuery e dovrà essere posto prima (quindi al di sopra) dello script che ci serve, che è questo:
<script>
$(function(){
$("#nav").load("nav.html");
});
</script>
$(function(){
$("#nav").load("nav.html");
});
</script>
Nel punto della pagina in cui dovrà apparire il menù (per es. nella sezione header), inserite questo richiamo:
<div id="nav"></div>
Ecco fatto, il menù di navigazione apparirà nel punto che avete stabilito e, quando dovrete aggiornarlo, non avrete che da aggiornare il file nav.html.
Naturalmente, potete usare questo metodo per includere qualunque contenuto di un file html esterno.
Evidenziare voci in un menù incluso
Inserisco questa soluzione, perchè richiesta da diversi utenti. Per evidenziare la voce del menu di navigazione riferita alla pagina attiva, si può usare questa soluzione.Nel file contenente le voci di menù, aggiungete una classe differente ad ogni voce.
Esempio:
<nav>
<a class="index" href="/index">Home page</a>
<a class="pag1" href="">pag 1</a>
<a class="pag2" href="">pag 2</a>
<a class="pag3" href="">pag 3</a>
</nav>
In ogni pagina in cui viene incluso il menù, applicate la regola di stile relativa alla voce corrispondente.
Per esempio, nella pagina 2, per cambiare il colore di fondo della voce di menù relativa alla pagina, sarà:
<style>
.pag2 {
background-color: #ffff00;
}
</style>
.pag2 {
background-color: #ffff00;
}
</style>
Includere più file
Potete, anche, includere più file, dando sempre un nome univoco al div.Per esempio:
<script>
$(function(){
$('#nav').load('nav.html);
$('#menu').load('menu.html);
$('#elenco').load('elenco.html);
});
</script>
$(function(){
$('#nav').load('nav.html);
$('#menu').load('menu.html);
$('#elenco').load('elenco.html);
});
</script>
NOTA: non è necessario che il nome dell'id nella pagina e quello del file da includere siano uguali, io l' fatto solo per chiarezza.
Includere una sezione specifica
È possibile includere anche una sezione specifica del file html esterno, in questo modo:
<script>
$(function(){
$("#titolo").load("pagina.html #sezione");
});
</script>
$(function(){
$("#titolo").load("pagina.html #sezione");
});
</script>
Dove al posto di "sezione" mettete l'id del div specifico, situato nel file esterno, in cui avrete racchiuso la parte del contenuto che volete includere.
Esempio:
<div id="sezione">
contenuto da includere
</div>
contenuto da includere
</div>
Includere una categoria di elementi
Esempio per una lista:
<script>
$(function(){
$("#titolo").load("pagina.html #sezione li");
});
</script>
$(function(){
$("#titolo").load("pagina.html #sezione li");
});
</script>
Allo stesso modo, è possibile includere il contenuto di ogni tag uguale della stessa pagina, o categoria definita da una classe.
Per esempio, se vogliamo includere l'elenco di tutti i titoli h2:
<script>
$(function(){
$("#titolo").load("pagina.html h2");
});
</script>
$(function(){
$("#titolo").load("pagina.html h2");
});
</script>
NOTA: se includete titoli (headings), fate attenzione a rispettare la gerarchia, altrimenti lo script non funzionerà.
Per esempio: se includete titoli h3, nella pagina devono esserci, prima, titoli h1 e h2. Se includete titoli h4, nella pagina devono esserci prima titoli h1, h2, h3.
Se la gerarchia dei titoli non viene rispettata, non funzioneranno nemmeno le inclusioni di altri elementi.
Se vogliamo includere tutti gli elementi appartenenti alla classe "item":
<script>
$(function(){
$("#titolo").load("pagina.html .item");
});
</script>
$(function(){
$("#titolo").load("pagina.html .item");
});
</script>
Includere un numero massimo di elementi
Possibile limitare il numero di elementi da includere.Esempio per includere un massimo di 20 titoli h3:
<script>
$(function(){
$("#titolo").load("pagina.html #sezione h3:lt(20)");
});
</script>
$(function(){
$("#titolo").load("pagina.html #sezione h3:lt(20)");
});
</script>
Includere due o più sezioni specifiche con una singola chiamata
Esempi:
<script>
$(function(){
$('#titolo').load('pagina.html #sezione1, #sezione2');
});
</script>
$(function(){
$('#titolo').load('pagina.html #sezione1, #sezione2');
});
</script>
<script>
$(function(){
$('#titolo').load('pagina.html h2, h3');
});
</script>
$(function(){
$('#titolo').load('pagina.html h2, h3');
});
</script>
I contenuti verranno caricati nell'ordine in cui si trovano nella pagina di origine.
Allo stesso modo si potranno includere più categorie per classi.
IMPORTANTE: non dimenticate che l'ID (#titolo negli esempi) deve essere univoco e uguale all'ID del div in cui verrà incluso il contenuto.
Includere contenuti random
Possibile aggiungere l'effetto random (riproduzione casuale) alla visualizzazione di una categoria di contenuti.Esempio:
<script>
$(function(){
$("#titolo").load("contenuti.html .item", function(){ $('.item').hide().eq(Math.floor(Math.random() * $('.item').length)).show() });
});
</script>
$(function(){
$("#titolo").load("contenuti.html .item", function(){ $('.item').hide().eq(Math.floor(Math.random() * $('.item').length)).show() });
});
</script>
Nell'esempio, lo script leggerà i contenuti della pagina "contenuti.html", identificati dalla classe ".item" e li mostrerà con effetto random al caricamento della pagina in cui vengono inclusi.
Includere contenuti con caricamento ritardato
Se i file da includere sono molti, potrebbero ritardare il caricamento della pagina e incidere sul punteggio di Google PageSpeed Insights (leggi: Velocità e performance di un sito web).Una soluzione valida è quella di ritardare il caricamento in modo da permettere alla pagina di caricarsi prima.
Questo è il codice:
$(function(){
setInterval(function(){
$("#primo").load("/pag1.html");
$("#secondo").load("/pag2.html");
},2000);
});
setInterval(function(){
$("#primo").load("/pag1.html");
$("#secondo").load("/pag2.html");
},2000);
});
La funzione setInterval può essere inserita anche tra le linee di codice per applicare il ritardo solo alle inclusioni successive, escludendo le precedenti.
Esempio:
$(function(){
$("#primo").load("/pag1.html");
setInterval(function(){
$("#secondo").load("/pag2.html");
},2000);
});
$("#primo").load("/pag1.html");
setInterval(function(){
$("#secondo").load("/pag2.html");
},2000);
});
Caricamento in base alla larghezza dello schermo
Per evitare una lunghezza eccessiva del DOM su cellulare, può essere utile includere determinati contenuti unicamente su schermi più larghi.Questo il codice di esempio:
<script>
if($(window).width() > 767){
$(function(){
$("#elemento").load("/pag.html");
});
}
</script>
if($(window).width() > 767){
$(function(){
$("#elemento").load("/pag.html");
});
}
</script>
Leggi anche: Leggere e comprendere il DOM
Includere il contenuto di un file di testo
Con jQuery e poche righe di javascript è possibile includere in un file html il contenuto testuale di un file txt.Esempio:
<script>
$(function(){
$("#titolo").load("file.txt");
});
</script>
$(function(){
$("#titolo").load("file.txt");
});
</script>
Con un po' di fantasia, potete personalizzare lo spazio dedicato per avere un risultato simile a questo:
Il codice HTML CSS per ottenerlo è il seguente:
<style>
.news {
max-width: 600px;
width:100%;
text-align: center;
margin:0 auto;
border: 2px solid #CCC;
background-color: #ffffe6;
}
.news h2 {
color: #e62e00;
}
</style>
<div class="news">
<h2>News</h2>
<p id="text"></p>
</div>
.news {
max-width: 600px;
width:100%;
text-align: center;
margin:0 auto;
border: 2px solid #CCC;
background-color: #ffffe6;
}
.news h2 {
color: #e62e00;
}
</style>
<div class="news">
<h2>News</h2>
<p id="text"></p>
</div>
Non dimenticate il collegamento alla libreria jQuery
Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.
Elenco argomenti di questa guida:
Altro di interesse
Torna alla pagina principale:Creare un sito da zero ->>
Continua con: La pagina web perfetta