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.

Artikkelen fortsetter etter annonsen

annonsørinnhold

Teknologi sikrer 100 års ekstra levetid på ingeniør-mesterverket

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

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