10

I am trying to import an HTML document into my main document using

<link rel="import" href="my-tabs.html">

but it doesn't seem to be working.

I am following this presentation, using Chrome 28, and I have enabled these two flags in about:flags:

Enable experimental WebKit features
Enable experimental JavaScript

Am I missing something? or is there another flag I need to enable to get it?

1

6 Answers 6

8

For latecomers:

As of 2021, HTML imports feature has been deprecated (MDN Link).

Due to uncertainty about this feature, I would not recommend its usage.

My recommendation: Add a data- attribute to html imports. Write a script that runs on all those elements with that attribute and access those html parts using fetch() in the script. Create a div and add that fetched import to that div at the same place. Essentially, add some JS based post processing that will download the html and inset into the same place as the import, replacing it.

3
  • And so what do you recommend
    – Alexis
    Feb 22, 2021 at 9:01
  • Added my recommendation. But it's my approach, yours could be different. Feb 23, 2021 at 7:08
  • 1
    @Nitin Jadhav The linked page does not mention HTML imports.
    – Mahozad
    Dec 24, 2021 at 19:29
8

HTML Imports only work natively in Chrome Canary (and even there they're only half-baked). For that presentation, Eric uses a project called Polymer, which provides a polyfill for HTML Imports (among other things). Check it out!

Update: The current partial implementation of HTML Imports isn't even available in Chrome Canary. Its flag is set to only turn it on for tests (not builds). It's not even an option in about:flags yet.

Update again: Now there's a flag in about:flags. It's called Enable HTML Imports. Not sure exactly when it came about. I've got it in Chrome 32.0.1671.3 dev on Linux.

2

HTML Imports only worked on Chrome 36-72 it was deprecated and removed.

Shadow DOM V0, Custom Elements V0, and HTML Imports were launched in 2014, but they did not get adopted by other browser engines. Instead, Shadow DOM V1, Custom Elements V1, and ES modules are widely adopted by various browser engines today. Chrome has shipped Shadow DOM V1 / Custom Elements V1 in 2016 and ES modules in 2017.

For more information see,

1

I just thought I'd add this isn't implemented in Firefox either, it's currently being tracked at https://bugzilla.mozilla.org/show_bug.cgi?id=877072

In the short term you have to use the polymer polyfill that covers most browsers:

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
    <link rel="import" href="/static/troll.html"/>
</head>
1

Still not supported on iOS and Android, still not on Firefox (as of Oct -15).

-2

HTML Imports has been landed in some modern browsers. So if you want to implement modern technology then you can do it with just writing some lines of code:

<link rel="import" href="import.html" onload="handleLoad(event)" onerror="handleError(event)">

onload and onerror are for logging the status of the page. (If the import page has been loaded or not.)
I've wrapped my import page (import.html) into <template> tag to clone it in a Javascript Variable.

import.html:

<template>
  <h1>Hi there!</h1>  
  <h2>To use html-imports..</h2>
  <h3>In Chrome 35 and below(in which you found the flag) you've to enable the flag: <span style="color: brown;">chrome://flags/#enable-html-imports</span></h3>
  <h3>In Chrome 36 and Opera 23, it's supported by default. </h3>
</template>

You've to use Javascript to use the imported page

// Thanks to http://www.html5rocks.com/en/tutorials/webcomponents/imports/
var link = document.querySelector('link[rel="import"]');
// Clone the <template> in the import.
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);

document.querySelector('#getting-started-info').appendChild(clone);

function handleLoad(e) {
  console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
  console.log('Error loading import: ' + e.target.href);
}

Variable link is used to get the import element.
Variable template is used to get the <template> from the import.html.
Variable clone is used to get the content of the <template> in import.html.
Then I try to append the content to an ID of a <div>.
handleLoad and handleError is used to notify the status of the import page via console which should be shown in many browsers' DevTools.
I've written an article here.
And Made a repository in Github at github.com/krman009/html-imports.
html5rocks article.
I wish this will help you.

5
  • Please summarize your linked content in your answer so it is still useful if the linked content changes or becomes unreachable.
    – skrrgwasme
    Oct 1, 2014 at 15:43
  • Sorry, But I can't get it
    – Kaushalya
    Oct 1, 2014 at 15:45
  • 1
    What do you mean you can't get it? You open your links, write up a small summary or quote the important bits, and put that information in your answer. From the help center: "Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline". Your answer needs to still be a useful answer if all of your links were removed.
    – skrrgwasme
    Oct 1, 2014 at 15:51
  • Ok Got it ... Thanks.. And I am not a excellent answerer so it might take time to be one.
    – Kaushalya
    Oct 2, 2014 at 10:11
  • It seems that this kind of import approach is no longer supported in modern browsers, Aug 7, 2022 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.