简介

 
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 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)的更多相关文章

  1. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  2. 纯js异步无刷新请求(只支持IE)【原】

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  3. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  4. HTML5 History API实现无刷新跳转

    在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...

  5. js实现无刷新表单提交文件,将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  6. ajax与HTML5 history API实现无刷新跳转

    一.ajax载入与浏览器历史的前进与后退 ajax可以实现页面的无刷新操作,但是无法前进与后退,淡出使用Ajax不利于SEO.如今,HTML5让事情变得简单.当执行ajax操作时,往浏览器histor ...

  7. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  8. 有趣的API: history pushState/popstate 无刷新跳转(pjax)

    API介绍 首先看看API如何使用: history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录. state(any) 需要保存的数据, ...

  9. js实现无刷新上传

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...

随机推荐

  1. 使用jpeglib库实现bmp转jpg

    一.vc编译jpeglib库 1.下载源代码 下载地址:http://www.ijg.org/.注意:一定要下载win32 版本 2.编译源代码. A.解压源代码,修改源代码中jconfig.vc为j ...

  2. 「花田对」CSDN程序员专场——谁来拯救技术宅!_豆瓣

    「花田对」CSDN程序员专场--谁来拯救技术宅!_豆瓣 「花田对」CSDN程序员专场--谁来拯救技术宅!

  3. Backward Digit Sums(暴力)

    Backward Digit Sums Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5664   Accepted: 32 ...

  4. LDT自己定义启动模拟器

    近期使用LUA开发手游,团队里大神自研了个框架,底层C++渲染,上层LUA处理逻辑. LUA的IDE选择LDT,不爽的是它不能自己主动启动模拟器,看过COCOSIDE能自启动,于是我想改造下LDT让它 ...

  5. vb.net中让控件内容为空(Control类)

    在平常的敲系统中大家有没有遇到需要让Textbox控件或者其他的控件的显示内容为空,以前直接的做法是直接等于空值,如果此类控件有很多,都需要空值,难道都要设置一下它的值为空嘛,显然这是一个笨办法,有没 ...

  6. IOS-时间与字符串互相转换

    有时会遇到这种问题,须要把时间和时间戳互相转换 比方把"这种格式 或者是把""转换成"2014-07-16 15:54:36" 首先来第一个: 当前时 ...

  7. css3设置box-pack和box-align让div里面的元素垂直居中

    只要设置元素的box-pack和box-align即可,这两个属性当前只有webkit和moz支持,要设置垂直居中的话只需要将这两个属性的值都设置为center即可,需要的朋友可以参考下   以前处理 ...

  8. js中__proto__(内部原型)和prototype(构造器原型)的关系

    一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) Number.__proto__ === Function.prot ...

  9. JqueryEasyUI中combox的数据不显示

    在做一个用jeasyui做的项目中遇到一个问题,对应的数据取出来了但是数据项一直出不来后来经过检查原来是赋值的时候对应的数组元素的名称写的有问题,以后一定要注意对应的问题,不能犯类似的错误 funct ...

  10. HTML5实现坦克大战(一)

      Tank 字段 x:坦克的中心点的横坐标 y:坦克的中心点的纵坐标 dir:坦克的前进的方向 spped:坦克的速度 color:坦克的颜色,用于区分种类不同的坦克 bullet:坦克的子弹 为a ...