<link rel="import" href="my-tabs.html">
但似乎没起作用。
我正在按照这个演示文稿操作,在Chrome 28中,我已经在about:flags
中启用了这两个标志:
Enable experimental WebKit features
Enable experimental JavaScript
我有所遗漏吗?还是需要启用另一个标志才能得到它?
<link rel="import" href="my-tabs.html">
但似乎没起作用。
我正在按照这个演示文稿操作,在Chrome 28中,我已经在about:flags
中启用了这两个标志:
Enable experimental WebKit features
Enable experimental JavaScript
我有所遗漏吗?还是需要启用另一个标志才能得到它?
对于迟到者:
截至2021年,HTML导入功能已被弃用 (MDN 链接)。
由于对该功能的不确定性,我不建议使用它。
我的建议:将一个 data- 属性添加到 HTML 导入中。编写一个脚本,在所有带有该属性的元素上运行,并在脚本中使用 fetch()
访问那些 HTML 部分。创建一个 div 并将获取的导入添加到相同的位置。本质上,添加一些基于 JS 的后处理程序,将下载的 HTML 插入到与导入相同的位置,替换它。
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中使用它。
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<link rel="import" href="/static/troll.html"/>
</head>
截至2015年10月,iOS和Android仍不支持,Firefox仍未支持。
HTML导入已经在一些现代浏览器中实现了。因此,如果您想要实现现代技术,只需编写几行代码即可:
<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
用于从import.html
中获取<template>
。clone
用于获取import.html
中<template>
的内容。<div>
的ID上。handleLoad
和handleError
用于通过控制台通知导入页面的状态,这应该在许多浏览器的DevTools
中显示。