介绍
jQuery History 是一个轻量级的 JavaScript 库，可以轻松地为您的浏览器应用程序添加无刷新页面加载和历史记录管理功能。它是一个 NPM 包，可以与现代前端框架集成使用。
安装
您可以通过以下命令将 jQuery History 包安装到您的项目中：
npm install jquery-history
使用
初始化
要使用 jQuery History，您需要在 HTML 页面中引入 jQuery 和 jQuery History 脚本。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery-history/jquery.history.js"></script>
然后，您需要使用以下代码初始化 jQuery History：
$(document).ready(function(){ $.history.init(loadContent); });
loadContent 是由您定义的一个回调函数，用于加载新的内容并更新页面。例如：
function loadContent(hash) { // 加载新内容的代码 }
添加历史记录
当您更改网页内容时，您可以使用以下代码将其添加到浏览器历史记录中：
$.history.load(hash);
hash 是一个唯一的标识符，用于标识每个页面状态。例如：
$.history.load('page1');
监听历史记录变化
您还可以监听浏览器历史记录的变化，并在历史记录发生更改时自动更新页面。可以使用以下代码：
$(window).bind('hashchange', function() { var hash = location.hash; loadContent(hash); });
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ------- ---------- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------- -------- ----------------------------- ---------------------------- --- -------- ----------------- - -- ----- --- --- - ---- - ------- - ----------------------- - --------- - ---------------------------- ---------- - --- ---- - -------------- ------------------ --- --------- ------- ------ ---- ------ -------------------------- ------ ------------------ ---------- ------ ------------------ ---------- ----- ---- ------------- ---- ------ --- ------ ------- -------展开代码
以上示例代码演示了如何在使用 jQuery History 时加载新内容并更新页面。当单击链接时，页面将不会重新加载，而是动态地加载页面内容并添加到浏览器历史记录中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37719
