I HTML-dokumenter kan man enkelt importere stilsett, JavaScript, bilder, video og en hel del annet. Derimot er langt verre å importere HTML-innhold på en skikkelig måte. Man kan riktignok bruke iframe eller Ajax-metoder, men ikke uten betydelige ulemper.
Samtidig kan det være nyttig å gjenbruke HTML i ett dokument på tvers av og gjerne på flere steder i et annet dokument, omtrent som med et bibliotek med klasser eller funksjoner for et programmeringsspråk. Man kan få hjelp av et malverktøy på serversiden, men heller ikke det er tilstrekkelig fleksibelt i alle tilfeller. Derfor benyttes overnevnte metoder, mens stilsett og skript gjerne importeres med link- eller script-tagger.
Dette er bakgrunnen for et forslag til en ny W3C-standard, HTML Imports.
I HTML Imports kan man oppgi i head-delen av av HTML-dokument oppgi hvilke HTML-filer som skal importeres ved hjelp av en link-tagg som dette:
I vårt tilfelle seg importdoc.html slik ut:
Det å lekke til link-taggen i head fører bare til at den importerte files blir lest av nettleseren. Foreløpig vises ikke innholdet på websiden. Det krever i hvert tilfelle noen linjer med JavaScript, men dette gir også mulighet til inkludere bare deler av den importerte filen, dersom man ønsker dette. Koden nedenfor viser hvordan man velger «div1» i filen over.
Kodeeksempelet et en forenkling av et eksempel og en grundigere gjennomgang hos HTML5 Rocks.
En vesentlig egenskap ved importeringen er selvfølgelig muligheten til å bruke vanlige DOM-programmeringsgrensesnitt til å manipulere det importerte innholdet.
Det går ikke så klart fram av spesifikasjonsutkastet, men ifølge HTML5 Rocks-artikkelen kreves det at dokumenter som importeres fra andre domener, må være CORS-aktiverte (Cross-Origin Resource Sharing). CORS ble gjort til en offisiell W3C-standard i januar i år.
Spesifikasjonsutkastet for HTML Imports er skrevet av ansatte i Google. Google Chrome en stund hatt eksperimentell støtte for HTML Imports, men dette er i utgangspunktet deaktivert i den stabile utgaven, det vil si Chrome 33. Det er dog mulig å aktivere støtten via chrome://flags-siden – finn bryteren ved å søke på siden etter «import».
Det er allerede mulig å ta i bruk denne teknikken, også i andre nettlesere enn Chrome. Men det innebærer bruk av Polymer-biblioteket.
Leave a Reply