Question

我正在尝试使用

将HTML文档导入我的主文档

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

但它似乎没有起作用。

我正在关注this presentation，使用Chrome 28，我在about:flags中启用了这两个标记：

Enable experimental WebKit features
Enable experimental JavaScript

我错过了什么吗？或者是否需要另外一个标志来启用它？

Answer 1

HTML Imports仅在Chrome Canary中本机工作（甚至在那里它们只有half-baked）。对于该演示文稿，Eric使用了一个名为Polymer的项目，该项目为HTML Imports（以及其他内容）提供了一个polyfill。看看吧！

更新：Chrome Canary中甚至无法使用HTML Imports的当前部分实现。它的flag is set仅用于测试（不是构建）。它甚至不是about:flags中的一个选项。

再次更新： 现在 about:flags中有一个标记。它被称为Enable HTML Imports。不确定它到底发生了什么。我已经在Linux上的Chrome 32.0.1671.3 dev中获得了它。

Answer 2

我只是觉得我添加这个并不是在Firefox中实现的，它目前正在跟踪 https://bugzilla.mozilla.org/show_bug.cgi?id=877072

在短期内，您必须使用涵盖大多数浏览器的聚合物填充物：

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

Answer 3

仍然不支持iOS和Android，但仍不支持Firefox（截至10月15日）。

Answer 4

对于后来者：

自 2021 年起，HTML 导入功能已被弃用 (MDN Link)。

由于此功能的不确定性，我不建议使用它。

我的建议：为 html 导入添加 data- 属性。编写一个在所有具有该属性的元素上运行的脚本，并在脚本中使用 fetch() 访问这些 html 部分。创建一个 div 并将提取的导入添加到该 div 的同一位置。本质上，添加一些基于 JS 的后处理，将下载 html 并插入到与导入相同的位置，替换它。

Answer 5

HTML导入仅在不推荐使用并已删除的 Chrome 36-72 上工作。

Shadow DOM V0，Custom Elements V0和HTML Imports于2014年推出，但并未被其他浏览器引擎采用。如今，Shadow DOM V1，Custom Elements V1和ES模块被各种浏览器引擎广泛采用。 Chrome已在2016年推出了Shadow DOM V1 /自定义元素V1，并在2017年推出了ES模块。

有关更多信息，请参见

Answer 6

HTML Imports已经在一些现代浏览器中登陆。因此，如果您想实现现代技术，那么只需编写一些代码就可以实现：

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

onload和onerror用于记录页面的状态。（如果已加载导入页面。）
我已将导入页面（import.html）包装到<template>标记中，以便在Javascript变量中将其克隆。

<强> 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>

您已使用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);
}

变量link用于获取导入元素变量template用于从<template>获取import.html 变量clone用于获取<template>中import.html的内容然后我尝试将内容附加到<div>的ID handleLoad和handleError用于通过控制台通知导入页面的状态，该控制台应在许多浏览器中显示＆＃39; DevTools。
我写了article here 并在Github上的github.com/krman009/html-imports创建了一个存储库。
html5rocks article。
我希望这会对你有所帮助。

使用HTML链接rel导入HTML文档

6 个答案:

自 2021 年起，HTML 导入功能已被弃用 (MDN Link)。