10

我正在尝试使用将 HTML 文档导入到我的主文档中

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

但它似乎没有工作。

我正在关注此演示文稿，使用 Chrome 28，并在以下位置启用了这两个标志about:flags：

Enable experimental WebKit features
Enable experimental JavaScript

我错过了什么吗？还是我需要启用另一个标志才能获得它？

4

6 回答 6

8

HTML Imports 只能在 Chrome Canary 中本地工作（即使在那里它们也只是半生不熟）。在该演示中，Eric 使用了一个名为Polymer的项目，该项目为 HTML 导入（以及其他内容）提供了一个 polyfill。一探究竟！

更新：目前 HTML 导入的部分实现在 Chrome Canary 中甚至不可用。它的标志设置为仅在测试（而不是构建）时打开它。它甚至还不是一个选择about:flags。

再次更新：现在. about:flags它被称为Enable HTML Imports。不确定它是什么时候出现的。我在 Linux 上的 Chrome 32.0.1671.3 dev 中得到了它。

于 2013-07-12T20:57:39.137 回答
5

对于迟到者：

自 2021 年起，HTML 导入功能已被弃用（MDN 链接）。

由于对此功能的不确定性，我不推荐使用它。

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

于 2021-01-18T11:45:22.437 回答
1

我只是想补充一下，Firefox 中也没有实现，目前正在 https://bugzilla.mozilla.org/show_bug.cgi?id=877072跟踪

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

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
    <link rel="import" href="/static/troll.html"/>
</head>
于 2014-07-02T06:12:26.520 回答
1

HTML Imports 仅适用于Chrome 36-72，它已被弃用并删除。

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 模块。

有关更多信息，请参阅，

于 2019-06-15T23:17:55.427 回答
1

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

于 2015-10-18T08:34:17.300 回答
-2

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

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

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

导入.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>in的内容import.html。
然后我尝试将内容附加到<div>.
handleLoad并handleError用于通过控制台通知导入页面的状态，该页面应在许多浏览器中显示DevTools。
我在这里写了一篇文章。
并在 github.com/krman009/html-imports 在 Github 中创建了一个存储库。
html5rocks 文章。
我希望这会对你有所帮助。

于 2014-10-01T15:23:05.677 回答