简介
hinclude 是一个 JavaScript 库，用于在前端页面中包含片段的 HTML。它可以通过 AJAX 加载 HTML 片段，并将其插入到主页面中的指定位置，而无需刷新整个页面。
hinclude 的使用非常简单，只需要几行代码就可以实现动态加载HTML片段，节省带宽和提高页面响应速度。
安装
hinclude 可以通过 npm 安装，在终端中输入以下命令即可：
npm install hinclude
安装完成后，在需要使用 hinclude 的页面中引入它：
<script src="node_modules/hincludejs/dist/hinclude.min.js"></script>
基本用法
假设我们有一个 index.html 文件，其中需要动态加载一个 header.html 的头部文件。我们可以将 header.html 所需要的元素包装在一个 div 中，并设置一个 hx-include 属性来指定加载的地址：
-- -------------------- ---- ------- ------ ---- ------------------------------- ----------- -- -- ------------- ---- ------------------------------- ------- ------------------------------------------------------------ -------
然后在脚本中调用 includeTargets() 函数启用 hinclude 功能，并且传递选择器来指定要替换的元素：
document.addEventListener("DOMContentLoaded", function() {
includeTargets('div[hx-include]');
});这样，在页面加载完成后，hinclude 将会自动加载 header.html 和 footer.html 文件，并将它们插入到对应的 div 中。
高级用法 - 参数传递
hinclude 还支持在 URL 中添加参数，以便向被包含的 HTML 片段传递数据。例如：
<div hx-include="content.html?name=John&age=25"></div>
然后，在 content.html 文件中可以通过 JavaScript 访问这些参数：
var name = new URLSearchParams(window.location.search).get('name');
var age = new URLSearchParams(window.location.search).get('age');
console.log(name); // "John"
console.log(age); // "25"总结
hinclude 是一个非常实用的前端库，可以帮助我们快速实现动态加载 HTML 片段的功能。它使用起来非常简单，而且还支持在 URL 中传递参数。如果你需要在页面中加载大量的 HTML 片段，hinclude 绝对是一个值得尝试的工具。
示例代码：https://codepen.io/ChatGPT/pen/KKdWPEb
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37484