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?
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.
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.
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,
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>
Still not supported on iOS and Android, still not on Firefox (as of Oct -15).
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.
© 2022 - 2024 — McMap. All rights reserved.