用<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>
<div id="container"></div>
<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
<div id="layout">This will be load to index page</div>
6 import上的data属性
<link rel="import" href="import.html" data-id="layout">
可以使用如下方式获取
var link = document.querySelector('link[rel="import"]');
var dataSet = link.dataset;
dataSet是一个import上属性的集合。
7 与<template>
标签的结合使用
即被导入的html文件中,顶级标签是<template>
。在template被加载到DOM元素中之前,其中的脚本不会被执行。
<template id="layout">
<div>This will be load to index page</div>
</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);