关于history.js的使用
2024-09-29 15:55:11
项目地址: https://github.com/browserstate/history.js
做wap端的时候,有些时候一个页面里有很多小页面或者标签,希望刷新浏览器或者按返回键的时候,能够被当成一个页面去处理。所以就去找html5是否提供这样的接口。
最后发现确实有这个接口,但兼容性 不好。
后来发现这个插件 history.js,可以兼容各大浏览器。 html4是使用Hash值进行兼容。所以在获取url 问好后面的值时,需要判断是否是兼容模式。
js中如果是hash兼容模式 window.location.hash 这个值是不为空,如果不是hash兼容模式 window.location.hash值为空。
history.js 提供的demo也很简单
(function(window,undefined){
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
});
// Change our States
History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
History.back(); // logs {state:3}, "State 3", "?state=3"
History.back(); // logs {state:1}, "State 1", "?state=1"
History.back(); // logs {}, "Home Page", "?"
History.go(2); // logs {state:3}, "State 3", "?state=3"
})(window);
初次看,压根没看懂是如何使用的。。。。
经过实践,特来解释下上边的代码
//History主要改变的问号后面的键值。。
//这个是向浏览历史压入一条新纪录
//记录为当前url且问号后面的值为 state=1,
//将一个{state:1}对象压入该链接中,供下面的历史事件触发时调用,
//State 1 为其新的标题 (即head title);
//这个动作会触发下面statechange 事件
History.pushState({state:1}, "State 1", "?state=1"); //改变当前url问好后面的值
//不触发statechange事件
//不增加历史记录
History.replaceState({state:3}, "State 3", "?state=3"); //前提是通过History.pushState 增加的历史记录。
// 向前跳或者向后跳都会出发这个事件,刷新不会
//State对象中的data就是 上面存入的对象 {state:3}
History.Adapter.bind(window,'statechange',function(){
var State = History.getState(); instead of event.state
});
所以无论是将一条url压入历史中、返回上一页、向前跳一页等等(不包括刷新和原来的历史记录),都会触发statechange事件。 剩下的自己发挥。
原先我不知道压入的时候会触发,后面调试的时候才发现,也会。 这是个坑。。。
最新文章
- HTML5 之 FileReader(图片上传)
- Vmware扩展磁盘如何不需重启系统
- 【图像】Matlab图像标定工具箱
- expect结合ssh遍历线上机器
- java 的SYSTEM类【转】
- Spring RMI (Spring 远程方法调用)
- atitit.提升软件开发效率大的总结O5
- 【练习】使用服务下载图片并保存到sdcard
- 图文详解YUV420, yuv格式2
- SPOJ 78 Marbles 组合数学
- NSMutableArray 初始化与添加删除程序
- Java排序算法之插入排序
- 项目管理之 SVN 管理软件 CornerStone for Mac
- JavaScript事件与例子
- Azure PowerShell (14) 批量导出Azure ASM ACL和ARM NSG配置信息
- 关于web.xml中的<;welcome-file-list>;
- Codeforces Round #539 (Div. 2) - D. Sasha and One More Name(思维)
- github配置ssh密钥的方法
- ubuntu的安装及ubuntu中安装mysql和tomcat
- 【朝花夕拾】Android性能篇之(四)Apk打包
热门文章
- VS 自动添加注释
- java.io.WriteAbortedException: writing aborted; java.io.NotSerializableException
- 场景5 Performance Management
- 利用Volley封装好的图片缓存处理加载图片
- CFD计算
- Dapper学习笔记(5)-存储过程
- Linq Group By
- Java web 项目的相对路径的使用
- 为什么要学习java?
- 【C】二级指针探秘 &; 星号的两种用法(1.与基本类型结合形成另一种类型,比如与int结合形成int* 2.取值操作)