HTML Imports

最新推荐文章于 2022-08-26 13:55:46 发布

GLJK24

最新推荐文章于 2022-08-26 13:55:46 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： html 标签

本文链接：https://blog.csdn.net/JKK24/article/details/78588161

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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