# HTML import支持

**Repository Path**: bloodtianguo/html-import

## Basic Information

- **Project Name**: HTML import支持
- **Description**: 借助废弃的html import语法实现HTML或者其他代码片段的include功能。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2022-03-14
- **Last Updated**: 2022-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自定义HTML imports能力

#### 介绍
借助废弃的HTML imports语法实现HTML或者其他代码片段的include功能。

#### 使用说明
可以使用任意方式即可，可以在页面任意位置，例如直连：

```html
<script src="./html-import.js"></script>
```

例如import导入：
```html
<script>
    import './html-import.js';
</script>
```

如果需要兼容Safari浏览器，需要引入 safari-polyfill.js，且 safari-polyfill.js 需要在 html-import.js的前面加载。
```html
<script src="./safari-polyfill.js"></script>
<script src="./html-import.js"></script>
```

此时，页面中设置了`is="ui-import"`的`<link>`元素就有了include的能力，例如下面的HTML代码就会呈现header.html的内容效果：

```html
<link rel="import" href="header.html" is="ui-import">
```

支持load和error两个事件：
```js
link.addEventListener('load', function () {
    console.log('加载成功并结束触发');
});
link.addEventListener('error', function () {
    console.log('加载出错触发');
});
```

本项目采用内置自定义元素实现，并不支持IE浏览器。

<p>具体兼容性如下表所示：</p>
<table class="ui-table">
    <tr>
        <td>IE <span class="red">✘</span></td>
        <td>Firefox 63+ <span class="green">✔</span></td>
        <td>Chrome 67+ <span class="green">✔</span></td>
        <td>Safari 10.1+（需polyfill） <span class="green">✔</span></td>
        <td>iOS Safari 10.3+（需polyfill） <span class="green">✔</span></td>
        <td>Android <span class="green">✔</span></td>
    </tr>
</table>

更多信息可以访问：<a href="https://www.zhangxinxu.com/wordpress/?p=10009">https://www.zhangxinxu.com/wordpress/?p=10009</a>

#### 许可证

MIT，可以任意修改，保留 JS 代码顶部原作者版权信息即可。