history(路由控制)

最新推荐文章于 2023-02-22 22:12:41 发布

转载最新推荐文章于 2023-02-22 22:12:41 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hnshi/p/7685834.html

本文介绍了HTML5中History API的使用方法，包括pushState、replaceState及onpopstate事件的应用。通过实例展示了如何利用这些方法实现浏览器历史记录的管理与页面间的无刷新跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键对象和方法

history.pushState(); //历史记录新增一条链接，并改变当前URL ，页面无刷新

history.replaceState(); //替换当前URL,同时更新历史记录，页面无刷新

事件

onpopstate{

　　//这三个方法会触发 onpopstate事件

　　history.forward() //向前翻一页

　　history.back() //向后翻一页

　　history.go() //指定翻页

}

setTimeout(()=>history.pushState({page:1,uid:2200},'这个参数没什么用','home.html'),2000)

setTimeout(()=>history.pushState({page:2,cookie:303030303},'这个还是没什么用','about.html'),4000)



//执行回退 触发 onpopstate事件
setTimeout(()=>history.back(),6000);

window.onpopstate = function(event){
　　console.log(document.location)
　　console.log(event.state) //返回你定义的当前页面的第一个参数对象{page:1,uid:2200} 
}

转载于:https://www.cnblogs.com/hnshi/p/7685834.html