http://ourjs.com/detail/5507ed1b1e8c708516000007
示例:
http://browserstate.github.io/history.js/demo/
简介
HTML4有一些对浏览历史的前进后退API的支持如:
window.history.back();
window.history.forward();
window.history.go(-1);
window.history.go(1);
HTML5浏览器新添加了不刷新改变网址地址的API:
var currentState = history.state;
var stateObj = { foo: "bar" };
window.history.pushState(stateObj, "page 2", "bar.html");
这些API构建单页面无刷新网站是十分有帮助的,很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。
History.js优雅地支持所有浏览器的History/State的 API(pushState,replaceState,onPopState)。包括数据,title,replaceState。支持 jQuery,MooTools和Prototype。在HTML5浏览器,它使用原生API,可以直接修改URL,而无需再使用哈希值。对于HTML4 浏览器则使用Hash值进行兼容。
代码示例
(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);
效果
当在HTML5浏览器中时地址栏的变化
www.mysite.com
www.mysite.com/?state=1
www.mysite.com/?state=2
www.mysite.com/?state=3
www.mysite.com/?state=4
www.mysite.com/?state=3
www.mysite.com/?state=1
www.mysite.com
www.mysite.com/?state=3
当在HTML4浏览器中时地址栏的变化
www.mysite.com
www.mysite.com/#?state=1&_suid=1
www.mysite.com/#?state=2&_suid=2
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=4
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=1&_suid=1
www.mysite.com
www.mysite.com/#?state=3&_suid=3
分享到:
相关推荐
插件 history.js,可以兼容各大浏览器。 html4是使用Hash值进行兼容。所以在获取url 问好后面的值时,需要判断是否是兼容模式。
jquery history,jQuery的插件
尽管History.js是目前最受欢迎JavaScript库之一,并且在当时已被数百万用户的公司使用-经济和公司实践的现实似乎是公司更喜欢使用自己的内部版本并在本地与自己的开发人员一起解决问题,而不是向开源维护者提供资金...
前端项目-balupton-jquery-history,通过github.com/balupton/history.js的超级种子,jquery history允许您通过跟踪url散列轻松跟踪页面状态的更改。支持书签和后退和前进按钮触发的更改,以及跨浏览器支持。
iOS在微信浏览器回退是不重新加载页面的,有些时候是需要重新加载的,所以需要监听回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener(popstate, function(e){ alert&...
关于jQuery的历史 jQuery history plugin helps you to support back/forward buttons and bookmarks in your javascript applications.历史的jQuery插件可以帮助您回到您的JavaScript支持应用程序/前进按钮和书签。...
批处理方式打开History.IE5,查看操作系统临时文件
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。 与传统的AJAX的区别 传统的ajax有如下的问题: 1、可以无刷新改变页面内容,但无法改变页面URL 2、...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。 与传统的AJAX的区别 传统的ajax有如下的问题: 虽然ajax可以无刷新改变页面内容,但无法改变页面...
需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。...
javascript-history.go()和History.back()的区分_.docx
以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文。 本文的前提是基于后台的,...我使用的是 jquery.history.js 可以参考这个 history.js 看下面的代码 <!DOCTYPE html> <html xmlns
如下所示: history.pushState(null, null, document.URL); window.addEventListener...以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
slick-lightbox.js是一款基于slick.js和jquery的响应式弹出层lightbox插件。该jquery lightbox插件支持图片懒加载,支持键盘交互,支持HTML5 History API等。功能非常强大。
此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, title, #); document.addEventListener...
history.csv 包含了EDHEC提供的1997-2016年不同风格的对冲基金的收益率数据。 history.csv 包含了EDHEC提供的1997-2016年不同风格的对冲基金的收益率数据。history.csv 包含了EDHEC提供的1997-2016年不同风格的对冲...
hacker-history.pdf hacker-history.pdf