自定义HTML imports能力

介绍

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

使用说明

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

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

例如import导入：

<script>
    import './html-import.js';
</script>

如果需要兼容Safari浏览器，需要引入 safari-polyfill.js，且 safari-polyfill.js 需要在 html-import.js的前面加载。

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

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

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

支持load和error两个事件：

link.addEventListener('load', function () {
    console.log('加载成功并结束触发');
});
link.addEventListener('error', function () {
    console.log('加载出错触发');
});

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

具体兼容性如下表所示：

IE ✘

Firefox 63+ ✔

Chrome 67+ ✔

Safari 10.1+（需polyfill） ✔

iOS Safari 10.3+（需polyfill） ✔

Android ✔

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

许可证

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

张鑫旭 / HTML import支持

自定义HTML imports能力

介绍

使用说明

许可证

简介

发行版

贡献者

近期动态

张鑫旭 / HTML import支持 .gitee-modal { width: 500px !important; }

自定义HTML imports能力

介绍

使用说明

许可证

简介

发行版

贡献者

近期动态

搜索帮助

张鑫旭 / HTML import支持