使用HTML链接rel导入HTML文档

11
我正在尝试使用以下方法将一个HTML文档导入到我的主文档中:
<link rel="import" href="my-tabs.html">

但似乎没起作用。

我正在按照这个演示文稿操作,在Chrome 28中,我已经在about:flags中启用了这两个标志:

Enable experimental WebKit features
Enable experimental JavaScript

我有所遗漏吗?还是需要启用另一个标志才能得到它?


也许你需要一个HTTP服务器。http://stackoverflow.com/a/27222358/1941881 - Mr. Ree
6个回答

10

对于迟到者:

截至2021年,HTML导入功能已被弃用 (MDN 链接)。

由于对该功能的不确定性,我不建议使用它。

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


那么你有什么建议? - Alexis
添加了我的建议,但这是我的方法,你的方法可能不同。 - Nitin Jadhav
1
@Nitin Jadhav,链接页面没有提到HTML导入。 - Mahozad

8

HTML Imports只在Chrome Canary中原生支持(即使在那里,它们也仅半成品)。对于这个演示,Eric使用了一个名为Polymer的项目,该项目为HTML Imports提供了polyfill(以及其他功能)。一定要看看!

更新:HTML Imports的当前部分实现甚至在Chrome Canary中也不可用。其标志已设置为仅在测试中打开它(而不是构建)。它甚至还没有在about:flags选项中。

再次更新:现在about:flags中有一个标志。它称为启用HTML Imports。不确定它是何时出现的。我在Linux上的Chrome 32.0.1671.3 dev中使用它。


2
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模块。
更多信息请参见:

1
我想补充一下,这在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>

1

截至2015年10月,iOS和Android仍不支持,Firefox仍未支持。


-2

HTML导入已经在一些现代浏览器中实现了。因此,如果您想要实现现代技术,只需编写几行代码即可:

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

onloadonerror用于记录页面的状态。(导入页面是否已加载)
我已经将我的导入页面(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用于从import.html中获取<template>
变量clone用于获取import.html<template>的内容。
然后我尝试将内容附加到<div>的ID上。
handleLoadhandleError用于通过控制台通知导入页面的状态,这应该在许多浏览器的DevTools中显示。
我在这里写了一篇文章
并在Github上创建了一个存储库,网址为github.com/krman009/html-imports。
html5rocks文章
希望这能帮到你。

请在您的回答中总结您链接的内容,以便即使链接内容发生更改或无法访问时仍然有用。 - skrrgwasme
抱歉,但我无法理解。 - Kaushalya
1
你说你不明白吗?你需要打开链接,写一个小总结或引用重要的部分,并将这些信息放入你的答案中。根据帮助中心的指导:“在引用重要链接时,始终引用最相关的部分,以防目标站点无法访问或永久离线”。即使你的所有链接都被删除,你的答案仍然需要是有用的。 - skrrgwasme
好的,明白了...谢谢。我不是一个出色的回答者,所以可能需要些时间。 - Kaushalya
看起来这种导入方式在现代浏览器中不再受支持。 - willy wonka

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接