码迷,mamicode.com
首页 > 其他好文 > 详细

基于hashchange导航管理

时间:2018-05-02 13:26:15      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:基于   hash   特殊   五一   info   管理   不同   inf   加载   

想在五一放假的时候写出来,由于放假有点兴奋,心早就跑了,不废话了。

说一下基于hashchange导航管理:

浏览器的历史记录导航是用户非常常用的功能,除了点击前进后退按钮外,Window上的history对象还可以实现浏览器的导航.

例如:window.history.back();//后退

          window.forward();//前进

         window.history.go(-1);//后退一步

         window.history.go(1)//前进一步

这些方法都会有一个共同的特点是都会导致浏览器重新加载刷新,频繁的页面加载会消耗大量的时间,对用户的体验极差。

还好,url中有个特殊的部分是hash片段,在同一个网页当中不同的得hash切换不会重新刷新加载页面,但是会在history留下历史记入。在hash片段发生变化时会触发hashchange事件,来进行切换。就这么多了 看一下demo:

技术分享图片

技术分享图片技术分享图片

可以看一下该事件的对象:  重要事情说一遍:

技术分享图片

 

基于hashchange导航管理

标签:基于   hash   特殊   五一   info   管理   不同   inf   加载   

原文地址:https://www.cnblogs.com/yscode/p/8979441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!