Import HTML document using HTML link rel

问题

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:

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:

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>

回答3:

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

回答4:

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,

Intent to Deprecate and Remove: HTML Imports
Caniuse.com - HTML Imports
Chrome Platform Status - HTML Imports (deprecated)
MDN Web Components Reference - HTML Imports

回答5:

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.

来源：https://stackoverflow.com/questions/17612405/import-html-document-using-html-link-rel

标签

javascript

html5

web-component

html-imports