基于hashchange导航管理
想在五一放假的时候写出来,由于放假有点兴奋,心早就跑了,不废话了。
说一下基于hashchange导航管理:
浏览器的历史记录导航是用户非常常用的功能,除了点击前进后退按钮外,Window上的history对象还可以实现浏览器的导航.
例如:window.history.back();//后退
window.forward();//前进
window.history.go(-1);//后退一步
window.history.go(1)//前进一步
这些方法都会有一个共同的特点是都会导致浏览器重新加载刷新,频繁的页面加载会消耗大量的时间,对用户的体验极差。
还好,url中有个特殊的部分是hash片段,在同一个网页当中不同的得hash切换不会重新刷新加载页面,但是会在history留下历史记入。在hash片段发生变化时会触发hashchange事件,来进行切换。就这么多了 看一下demo:



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

基于hashchange导航管理的更多相关文章
- GJM :用JIRA管理你的项目(三)基于LDAP用户管理 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- 结合docker发布后端项目(基于gradle包管理)的shell脚本
结合docker发布后端项目(基于gradle包管理)的shell脚本 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统(敏感信息都进行了处理) 目前主流的 ...
- 结合docker发布前端项目(基于npm包管理)的shell脚本
结合docker发布前端项目(基于npm包管理)的shell脚本 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统 目前主流的前后端分离的项目中,常常在部署 ...
- 开源基于lua gc管理c++对象的cocos2dx lua绑定方案
cocos2dx目前lua对应的c++对象的生命周期管理,是基于c++析构函数的,也就是生命周期可能存在不一致,比如c++对象已经释放,而lua对象还存在,如果这时候再使用,会有宕机的风险,为此我开发 ...
- [专业名词·硬件] 2、DC\DC、LDO电源稳压基本常识(包含基本原理、高效率模块设计、常见问题、基于nRF51822电源管理模块分析等)·长文
综述先看这里 第一节的1.1简单介绍了DC/DC是什么: 第二节是关于DC/DC的常见的疑问答疑,非常实用: 第三节是针对nRF51822这款芯片电源管理部分的DC/DC.LDO.1.8的详细分析,对 ...
- 【基于url权限管理 shiro(一)】--基础
只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源.权限管理包括用户认证和授权两部分. 用户认证 1.概 ...
- 基于 vue2 导航栏透明渐变
在移动或者app 中经常会用,顶部导航栏固定,但是随着页面向上滚动,导航栏的透明度发生变化. 做法为: 1.首先给要滚动变化的导航添加 :style="style" <mt- ...
- Shiro集成SSM基于URL权限管理(一)
学习了shiro之后,我们就可以说尝试把shiro加入ssm中,并做一套基于URL的权限管理. 其他的准备工作就不多说了,直接动手操作,看到效果再去理解. 表结构 执行如下,数据库名字可以自行修改,不 ...
- 基于角色权限管理:rbac具体代码实现
权限管理 创建一个rbac和app的应用,这个rbac主要是用来存放权限的,全称叫做基于角色权限控制 一.先看配置文件合适不,给创建的rbac在配置文件里面设置一下 找到INSTALLED_APPS= ...
随机推荐
- [代码应用]javaSE程序递归删除文件夹下的.bak文件程序源代码
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39158939 本文作者:sushengmiyan ------------------ ...
- Java基础---Java---IO流-----读取键盘录入、InputStreamReader、转换流、OutputStreamWriter、InputStreamReader
字符流: FileReader FileWriter BufferedReader BufferedWriter 字节流: FileInputStream FileOutputStream Buffe ...
- (一〇七)iPad开发之modal的切换方式与展示方式
在iPad上modal有四种切换方式,分别是竖直进入(由下到上,默认方式).水平翻转.淡入淡出. 属性要设置在将要modal出来的控制器上: /* typedef NS_ENUM(NSInteger, ...
- 成员函数的const到底修饰的是谁
demo <pre name="code" class="cpp">class Test { public: const void OpVar(in ...
- (七十六)CoreLocation(二)获取经纬度、速度、方向,进行区域监听
上节说明了如何在iOS7和iOS8上完成授权,并且开始获取位置,这一节介绍获取位置信息的方法. [定位精度] 定位精度有多种选择:根据字面意思即可理解 extern const CLLocationA ...
- React Native项目组织结构介绍
代码组织: 目录结构: . ├── components //组成应用的各个组件 │ ├── Routers.android.js //每个组件若实现不一样,分为android的实现和ios的实现 ...
- Android学习之AppWidget高级效果
接着AppWidget基础学习,今天是一个"进阶版"的小例子,用来检验一下自己的学习效果.于是就做了一个掷骰子的Widget. 方便大家观看,先截图如下: 需要注意的是在drawa ...
- 01_Weblogic课程之概念篇:代理服务器,web服务器,应用程序服务器,JNDI概念,JTA概念,Java消息服务,Java验证和授权(JAAS),Java管理扩展,Web客户机,客户机应用程序
1 什么是服务器 Weblogic中服务器分为两种,一种是受管服务器,另外一种是管理服务器. Weblogic课程(Weblogic是Oracle公司的,最开始的是BEA公司的) 一 系统管理 ...
- Oracle中使用游标获取指定数据表的所有字段名对应的字符串
操作步骤:打开PLSQL Developer后,直接执行下面的语句就可以出来 --Oracle中使用游标获取指定数据表的所有字段名对应的字符串 declare mytablename VARCHAR( ...
- javascript之BOM编程Screen(屏幕)对象
这个对象属性相对比较简单.掌握四个方法即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...