HTML Imports

来源：互联网发布：医院网络拓扑结构图编辑：程序博客网时间：2024/05/16 06:49

用<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);

阅读全文

0 0