HTML får importfunksjon

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

Med HTML Imports kan HTML-dokumenter ikke bare lenkes til hverandre, men innholdet i ett dokument kan også importeres av et annet dokument. Bilde: W3C og PantherMedia/shkyo30

Del

Kommenter

Harald BrombachJournalist

13. mars 2014 - 13:16

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.

Artikkelen fortsetter etter annonsen

annonsørinnhold

9001 og 27001 gir beste praksis for Mediehuset Andvord

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.

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å: