• …vuoi RADDOPPIARE le visite del tuo sito? Scegli il miglior Hosting WordPress!

Giuseppe Fava

Follow @giuseppe_fava
  • Home
  • Internet
    • WordPress
    • Joomla
  • Pc e Software
    • Windows
    • Linux
  • Mobile VoIP
  • Altro
Home » Come includere file HTML in un altro con HTML Import

Come includere file HTML in un altro con HTML Import

di Giuseppe Fava Lascia un commento

HTML è il linguaggio standard per realizzare pagine web ma non è facile da estendere e la manutenzione del codice spesso richiede molto tempo. Spesso c’è bisogno di altri linguaggi di livello superiore per generare dinamicamente le pagine HTML come ad esempio PHP. Talvolta però i progetti da realizzare sono talmente piccoli da non giustificare l’utilizzo di un linguaggio di scripting ed è sufficiente una funzione standard come includere file HTML in un altro per rendere il codice riutilizzabile e di facile manutenzione.

Vediamo allora  come includere file HTML in un altro utilizzando la direttiva HTML Import, una nuova caratteristica molto attesa che con molta probabilità cambierà il modo di sviluppare pagine web nei prossimi anni. Questa caratteristica non è ancora implementata ufficialmente e ad oggi (luglio 2014) l’unico browser compatibile è Chrome dalla versione 36 in poi. Questa nuova caratteristica del browser è disabilitata di default e per attivarla devi aprire la pagina chrome://flags, abilitare l’opzione Enable HTML Imports e riavviare Chrome.

Come includere file HTML

Includere un file HTML è quasi come includere un foglio di stile. Si utilizza il tag <link> ma al posto di utilizzare rel=stylesheet, si usa rel=import. Facciamo un esempio includendo un file che chiameremo template.html. Il codice di importazione è questo:

<link rel="import" href="template.html">

Se apriamo la pagina web con Chrome DevTools nella tab Network possiamo vedere che Chrome carica il file template.html.

Come includere file HTML

Tieni presente che il contenuto del file HTML non viene inserito subito e appeso al codice HTML della pagina, quindi al momento non apparirà nulla a video.

Come includere file HTML – Riutilizzare i contenuti

Per appendere il contenuto in un file dobbiamo scrivere alcuni comandi Javascript. In un caso normale potremmo inserire questo codice nella head della pagina ma per questo esempio lo inseriremo nel Body dopo la rel=import. E’ necessario fare questo per essere certi che lo script possa accedere agli elementi contenuti nel file importato con i loro id, classi ecc. Per iniziare selezioniamo il file con questo codice:

var getImport = document.querySelector('link[rel=import]');

Questo seleziona tutti i tag link con rel=import. Se vogliamo importare più file HTML e selezionare solo uno specifico tag link, dobbiamo aggiungere un id al tag e fare riferimento a questo id invece che al link rel come in questo esempio:

<link rel="import" id="template-file" href="template.html">

in questo caso il codice Javascript è:

var getImport = document.querySelector('#template-file');

Una volta selezionato il file, dobbiamo scegliere quale contenuto includere al file principale. Se nella tua pagina HTML hai un wrapper con un id=”content”, puoi selezionarlo in questo modo.

Come includere file HTML in un altro con HTML Import

Click To Tweet

var getContent = getImport.import.querySelector('#content');

Ora possiamo appendere il contenuto del file usando il metodo JavaScript appendChild().

document.body.appendChild(document.importNode(getContent, true));

Il contenuto ora sarà visibile nel file principale.

LEGGI ANCHE:   10 Frameworks per creare applicazioni Mobile con HTML, CSS & JavaScript

Come includere file HTML

Usare i fogli di stile CSS

Al contrario di quanto accade con i contenuti, i fogli di stile importati vengono subito applicati al file HTML. Proviamo a creare un file style.css con in contenuto qui sotto e dopo l’importazione vedremo che verrà applicato subito il colore rosso al tag <P>

p {
color: red;
}

Ecco il risultato

Come includere file HTML

Conclusioni

Ora che abbiamo visto Come includere file HTML è facile rendere modulare un sito scomponendo le parti comuni e inglobandole in file separati. Una cosa da tenere in mente è che l’utilizzo di codice Javascript rende il risultato finale invisibile ai software di analisi e ai motori di ricerca, pertanto questa caratteristica influenza la SEO del sito dove la si utilizza.

FacebookTwitterLinkedinPinterest

Archiviato in:Internet Contrassegnato con: html, programmazione, sviluppo

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

offerte amazon
Ad - Web Hosting SiteGround - Creato per semplificare la gestione del sito. Clicca per scoprire di più.

Copyright © 2023 · Privacy policy · Realizzato da Giuseppe Fava · con il miglior hosting WordPress · Contatti

Go to mobile version