HTML får importfunksjon

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:


<link rel="import" href="/imports/importdoc.html">

I vårt tilfelle seg importdoc.html slik ut:


<div class="div1">
  <h3>Dette er div1</h3>
  <p>Ser du den?</p>
</div>

<div class="div2">
  <h3>Dette er div2</h3>
  <p>Ser du den?</p>
</div>

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.


<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;var el = content.querySelector('.div1');
document.body.appendChild(el.cloneNode(true));
</script>

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.

Artikkelen fortsetter etter annonsen

annonsørinnhold

30.000 strømmet til Las Vegas for Google Cloud Next. Dette var høydepunktene

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.

Les også:

[29.10.2014] HTML5 er gjort til W3C-standard
[27.05.2014] Neste Chrome støtter HTML-import

HTML får importfunksjon

Gjør det langt enklere å gjenbruke HTML-innhold.