简介

 
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. 新装docker 从本地仓库下载

    docker:/root# docker images Get http:///var/run/docker.sock/v1.19/images/json: dial unix /var/run/do ...

  2. paip.c++ qt 共享库dll的建立

    paip.c++ qt 共享库dll的建立 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/at ...

  3. 如何在TableView上添加悬浮按钮

    如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬 ...

  4. 数据挖掘(七):Apriori算法:频繁模式挖掘

    1 算法思想 算法使用频繁项集性质的先验知识.Apriori使用一种称作逐层搜索的迭代方法,k项集用于探索(k+1)项集.首先,通过扫描数据库,累积每个项的计数,并收集满足最小支持度的项,找出频繁1项 ...

  5. 把war包放到Tomcat安装文件夹下,不能直接訪问的解决方式

    临床表现: Tomcat启动后首页能訪问(http://localhost:8080/). 将自己写的一个webprojectwar包放到Tomcat安装文件夹下的/webapps以下(比方hello ...

  6. POJ2229 Sumsets 【递归】

    Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 13210   Accepted: 5300 Descrip ...

  7. UITabBarController 笔记(三) UITabBarController 配合 UINavigationController 的使用

    建个空的iOS工程 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictiona ...

  8. HBASE学习笔记--配置信息

    hbase的配置信息,在hbase-site.xml里面有详细说明. 可以按照需要查询相关的配置. <?xml version="1.0"?> <?xml-sty ...

  9. 配置Nutch模拟浏览器以绕过反爬虫限制

    原文链接:http://yangshangchuan.iteye.com/blog/2030741 当我们配置Nutch抓取 http://yangshangchuan.iteye.com 的时候,抓 ...

  10. JS 把 Wed Jul 15 2015 00:00:00 GMT+0800 转换成2015-07-15

    function strlen(str) { var len = 0; for (var i = 0; i < str.length; i++) { var c = str.charCodeAt ...