用<link rel="import" href="a.html" /> 的方式来导入html文件。
1 也可以使用iframe来导入，不过，iframe的样式比较难以调整。iframe作为一个独立的页面被导入到父页面之中，import的方式可以将导入的页面放入父页面中的某标签之中。
2 使用import可以同域导入，也可以跨域导入
<link rel="import" href="a.html" />
<link rel="import" href="http://www.example.com/a.html" />
3 检测浏览器是否支持import方式
'import' in document.createElement('link')
结果是true/false
4 load/error 事件，用于监听import的事件
<link rel="import" href="a.html" onload="load(event)" onerror="error(event)"/>
5 例子
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="import.html">
</head>
<body>
<p id="container"></p>
<script>
var link = document.querySelector('link[rel="import"]');
var layout = link.import.getElementById('layout');
var container = document.getElementById('container');
container.appendChild(layout.cloneNode(true));
</script>
</body>
import.html
<p id="layout">This will be load to index page</p>
1
6 import上的data属性
<link rel="import" href="import.html" data-id="layout">
1
可以使用如下方式获取
var link = document.querySelector('link[rel="import"]');
var dataSet = link.dataset;
dataSet是一个import上属性的集合。
7 与<template>标签的结合使用
即被导入的html文件中，顶级标签是<template> 。在template被加载到DOM元素中之前，其中的脚本不会被执行。
<template id="layout">
<p>This will be load to index page</p>
</template>
8 被template包裹的情况下的使用
var link = document.querySelector('link[rel="import"]');
var layout = link.import.getElementById('layout');
var container = document.getElementById('container'); container.appendChild(layout.content.cloneNode(true));
// var clone = document.importNode(layout.content, true);
// container.appendChild(clone);
标签的结合使用 This will be load to index page 8 被template包裹的情况下的使用
即被导入的html文件中，顶级标签是 。在template被加载到DOM元素中之前，其中的脚本不会被执行。
var link = document.querySelector('link[rel="import"]');
var layout = link.import.getElementById('layout');
var container = document.getElementById('container'); container.appendChild(layout.content.cloneNode(true));
// var clone = document.importNode(layout.content, true);
// container.appendChild(clone);
