Corsi on-line

HTML Imports: inclusioni client side senza JavaScript

Esistono numerosi metodi per importare un contenuto all’interno di una pagina Web, ma soltanto di recente tale procedura è divenuta possibile tramite HTML (e per la precisione attraverso HTML5); per citare soltanto alcune delle soluzioni disponibili, basti pensare alle istruzioni PHP basate su include() e require(), ma in questo caso parliamo di operazioni basate su tecnologie server side.

HTML5

Per quanto riguarda invece l’approccio client side, non sempre i metodi disponibili si dimostrerebbero particolarmente ortodossi, si pensi per esempio all’utilizzo dei frames (poco amati dai motori di ricerca nonché gravati da numerosi limiti riguardanti usabilità e l’accessibilità), all’embedding dei contenuti fino ad operazioni non sempre condivisibili come le inclusioni operate tramite Ajax, si pensi per esempio a costrutti come responseType='document'.

Gli HTML Imports di HTML5 sono invece una parte dei Web components che consentono di includere documenti HTML in altri documenti HTML; nello stesso modo essi consentiranno di inserire all’interno di una pagina Web altre tipologie di documenti come per esempio file CSS e JavaScript. Il supporto verrà garantito in ogni caso, senza limiti legati al markup, con l’unico vincolo di includere contenuti che possano essere visualizzabili tramite browser.

Un semplice esempio di importazione tramite HTML imports potrebbe essere il seguente:

<head>
  <link rel="import" href="/docs/file-name.html">
</head>

Il percorso o l’URL in importazione prenderanno il nome di import location, ma per caricare un contenuto riferito ad un dominio esterno l’import location potrà funzionare solo in caso di abilitazione del CORS (Cross-Origin Resource Sharing), si tenga comunque presente che più importazioni che fanno riferimento alla stessa import location verranno comunque eseguite una volta sola.

Via W3C

Post correlati
I più letti del mese
Tematiche