javascript 使用 HTML 链接 rel 导入 HTML 文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17612405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Import HTML document using HTML link rel
提问by Konga Raju
I am trying to import an HTML document into my main document using
我正在尝试使用将 HTML 文档导入到我的主文档中
<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:
我正在关注此演示文稿，使用 Chrome 28，并且已在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?
我错过了什么吗？还是我需要启用另一个标志才能获得它？
回答by CletusW
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!
HTML 导入仅在 Chrome Canary 中本地工作（即使在那里它们也只是半成品）。对于该演示，Eric 使用了一个名为Polymer的项目，该项目为 HTML 导入（以及其他内容）提供了一个 polyfill。看看这个！
Update:The current partial implementation of HTML Imports isn't even available in Chrome Canary. Its flag is setto only turn it on for tests (not builds). It's not even an option in about:flagsyet.
更新：当前 HTML 导入的部分实现在 Chrome Canary 中甚至不可用。它的标志设置为仅将其打开以进行测试（而非构建）。它甚至还不是一个选项about:flags。
Update again:Nowthere'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.
再次更新：现在有一个标志about:flags。它被称为Enable HTML Imports。不确定它是什么时候出现的。我在 Linux 上的 Chrome 32.0.1671.3 dev 中得到了它。
回答by Kaushalya
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:
HTML 导入已登陆一些现代浏览器。因此，如果您想实现现代技术，那么只需编写几行代码即可：
<link rel="import" href="import.html" onload="handleLoad(event)" onerror="handleError(event)">
onloadand onerrorare 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.
onload和onerror用于记录页面的状态。（无论导入页面是否已加载。）
我已将导入页面 ( import.html)包装到<template>标记中以将其克隆到 Javascript 变量中。
import.html:
导入.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
您必须使用 Javascript 才能使用导入的页面
// 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 linkis used to get the import element.
Variable templateis used to get the <template>from the import.html.
Variable cloneis used to get the content of the <template>in import.html.
Then I try to append the content to an ID of a <div>.handleLoadand handleErroris 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.
变量link用于获取导入元素。
变量template用于<template>从import.html.
变量clone用于获取<template>in的内容import.html。
然后我尝试将内容附加到一个<div>. handleLoad并handleError用于通过控制台通知导入页面的状态，该状态应显示在许多浏览器的DevTools.
我在这里写了一篇文章。
并在 github.com/krman009/html-imports 的 Github 中创建了一个存储库。
html5rocks 文章。
我希望这会帮助你。
回答by Mosca Pt
Still not supported on iOS and Android, still not on Firefox (as of Oct -15).
仍然不支持 iOS 和 Android，仍然不支持 Firefox（截至 10 月 -15 日）。
回答by Doug
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
我只是想补充一点，这也没有在 Firefox 中实现，目前正在https://bugzilla.mozilla.org/show_bug.cgi?id=877072 上进行跟踪
In the short term you have to use the polymer polyfill that covers most browsers:
在短期内，您必须使用涵盖大多数浏览器的聚合物 polyfill：
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<link rel="import" href="/static/troll.html"/>
</head>
回答by georgeawg
HTML Imports only worked on Chrome 36-72it was deprecated and removed.
HTML 导入仅适用于Chrome 36-72它已被弃用和删除。
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.
Shadow DOM V0、Custom Elements V0 和 HTML Imports 于 2014 年推出，但并未被其他浏览器引擎采用。相反，Shadow DOM V1、Custom Elements V1 和 ES 模块被当今各种浏览器引擎广泛采用。Chrome 在 2016 年发布了 Shadow DOM V1 / Custom Elements V1，在 2017 年发布了 ES 模块。
For more information see,
有关更多信息，请参阅，
