Skip to content

Come includere porzioni di codice HTML esterno con jQuery

Pubblico questo breve tutorial su come rendere globale una porzione di codice HTML da richiamare tramite jQuery in ogni altra pagina.html “madre”.

A cosa serve e a chi può essere utile?

Se hai la necessità di mostrare e modificare in un colpo solo, un qualsiasi tipo di elemento su più pagine web, puoi creare un file.html esterno in cui scrivere il codice HTML da importare ed inserire dove desideri nel tuo sito web.

Step 1 – Caricare jQuery

Per prima cosa va inserito lo script seguente all’interno del tag <head> per far sì che vengano caricate le librerie jQuery per eseguire la funzione.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Potete trovare l’ultima versione di jQuery sul sito ufficiale https://code.jquery.com/

Step 2 – Creare i file.html esterni

È possibile creare e caricare diversi file.html esterni; io consiglio di creare ogni file.html per uno scopo specifico come ad esempio header.html e footer.html in modo tale da avere più libertà e semplicità nelle modifiche successive.

Step 3 – Creare la funzione load

Per comodità è consigliabile creare un file load.js in cui inserire lo script della funzione load:

$(function(){
   $("#header").load("header.html");
   $("#footer").load("footer.html");
});

Nello script precedente si richiamano i file header.html e footer.html associandoli all’ID header e footer, rispettivamente, che vedremo nel prossimo step a cosa ci servirà.

Fatto ciò carichiamo il file load.js in tutte le pagine.html madre in cui vogliamo includere i file.html esterni.

<script src="load.js"></script>

Step 4 – Includere i file.html esterni nella pagina.html madre

A questo punto basterà posizionare il tag con l’ID associato alla pagina.html esterna, nella posizione desiderata all’interno della pagina.html madre.

Ad esempio se vogliamo includere il codice HTML dedicato all’header si scriverà:

<header id="header"></header>