html5 link import加载,HTML5 Imports

简介

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

import

使用template模板的好处： template 元素加入到 DOM 之前，它包含的脚本不会执行。

引入与加载

html文件使用link标签引入，可以直接使用link标签，或者动态创建link标签。

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, ' + (this.getAttribute('name') || '?') + ''

};

document.registerElement('say-hi', {

prototype: proto

});

// main.html

使用注意：

导入跨域资源需要启用 CORS

来自相同URL的导入仅获取和解析一次，这表示导入中的脚本只在第一次导入的时候执行。

导入中的脚本按顺序自动执行，它们不会阻塞主页面解析。

导入链接不代表#把内容添加到这里，它代表告诉解析器去把这个文档取过来，我一会要用。脚本在导入期间运行，而样式、标记、还有其他资源需要明确的加入到主页面中。这是 HTML导入和之间的最大区别，iframe表示 "在这里加载并渲染资源"。

参考链接：