简介
HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法，使用HTML imports，我们可以很容易的在一个html引入其他html，实现复用，但是目前浏览器支持性不够好。 目前谷歌已经全面支持HTML imports，Opera35版本之后支持，但是Firefox和IE依旧不支持。
对于不支持HTML imports的浏览器可以采用引入ployfill的方式：https://github.com/WebComponents/webcomponentsjs，可以使用npm安装或者直接引入CDN。
注意：低版本的Chrome浏览器可能需要在浏览器地址栏输入：chrome://flags，启动HTML imports功能。
浏览器支持性
使用教程
检测支持性和导入polyfill
// main.html
function supportImport() {
return 'import' in document.createElement('link');
}
if (supportImport()) {
console.log('浏览器支持import特性');
} else {
console.log('浏览器不支持import特性');
// 引入polyfill
var e = document.createElement('script');
e.src = '[https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js](https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js)';
document.body.appendChild(e);
}
再定义一个被import的页面：import.html
<body>
<template>
<h1 id="title">import</h1>
</template>
</body>
使用template模板的好处： template 元素加入到 DOM 之前，它包含的脚本不会执行。
引入与加载
html文件使用link标签引入，可以直接使用link标签，或者动态创建link标签。
<link rel="import" hre="./import.html" onload="handleLoad(event)" onerror="alert(event)">
var link = document.createElement('link');
link.rel = 'import';
link.href = './import.html';
document.head.appendChild(link);
html文件引入成功后会触发load事件，失败则为error事件。
// import成功
link.onload = function(e) {
console.log('Loading Import: ', e.target.href);
};
// import失败
link.onerror = function(e) {
console.log('Error Loading Import: ', e.target.href);
};
本地文件CORS的问题：
访问本地计算机中的文件，使用的是file协议，file协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件一样，注意它是针对本地（本机）的，简单来说，file协议是访问你本机的文件资源。说白了就是，由于安全原因浏览器不允许跨域访问，安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会跨域失败，是因为浏览器安全机制不允许，而火狐为了方便允许跨域（虽然这样很不安全）。而且在其他浏览器中，出现跨域问题也是这个原因，就是浏览器安全机制的原因。
解决：由于是写demo就简单粗暴一点，直接用Webstorm打开就可以解决这个问题了（Webstrom中自带了一个本地服务器，会自动为你的文件开一个端口服务）
使用引入的内容
将import html中的DOM元素取出，加入main html的DOM结构中：
link.onload = function(e) {
var ilink = document.querySelector('link[rel="import"]');
// 从import.html中读取DOM
var template = ilink.import.querySelector('template');
var content = template.content.cloneNode(true);
// 对已有的节点进行克隆，deep值为true，表示克隆其子孙节点。如果deep为false，则只克隆该节点自身。
document.querySelector('#container').appendChild(content);
};
使用自定义元素
// import.html
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.innerHTML = 'Hello, <b>' + (this.getAttribute('name') || '?') + '</b>'
};
document.registerElement('say-hi', {
prototype: proto
});
// main.html
<say-hi name="youran"></say-hi>
使用注意：
-
导入跨域资源需要启用 CORS
-
来自相同URL的导入仅获取和解析一次，这表示导入中的脚本只在第一次导入的时候执行。
-
导入中的脚本按顺序自动执行，它们不会阻塞主页面解析。
-
导入链接不代表#把内容添加到这里，它代表告诉解析器去把这个文档取过来，我一会要用。脚本在导入期间运行，而样式、标记、还有其他资源需要明确的加入到主页面中。这是 HTML导入和<iframe>之间的最大区别，iframe表示 "在这里加载并渲染资源"。
参考链接：
网友评论