通过history.pushState无刷新改变url
通过history.pushState无刷新改变url
背景
在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。 为了解决ajax页面状态不能返回的问题，人们想出了一些曲线救国的方法，比如利用浏览器hash的特性，将新的资源路径伪装成锚点，通过onhashchange事件来改变状态，同时又避免了浏览器刷新。但这样始终显得有些hack。 现在HTML5规范为 window.history引入了两个新api，pushState 和 replaceState，我们可以使用它很方便的达到改变url不重载页面的目的。
表现
改变地址栏url，不刷新页面。 
观察地址栏，可以看到当url路径由”join”改变为”login”时，页面状态也随之改变，但并没有造成背景图片等资源的重新加载。 此时”join”被压入历史栈，当点击浏览器后退按钮时仍然能够回到”join”状态。
使用
pushState与replaceState方法类似，都有改变当前地址栏URL的作用。主要区别在于pushState会在浏览器中创建一条新的历史纪录，而replaceState仅仅替换将当前地址为指定URL。 下面以pushState接口为例：
API
history.pushState(state, title[, url]);
事件
执行history.back()或history.forward()后触发 window.onpopstate事件
参数
state： 对象，可以存存放一些数据表示当前状态。当浏览器执行前进后退操作时触发onpopstate事件，state将成为event的子对象，可通过event.state获取先前状态。但是注意state中的属性值不能为引用类型对象，会报ObjectCloneError（对象克隆异常），例如允许{data:”test”}，不允许{data:document.querySelector(‘#testId’)}。 title：目前无特殊意义，一般可以传入 document.title 或 ”(空字符串)。 url：要替换的url，如果是pushState则会添加一条历史记录，不允许跨域。
示例
history.pushState({title:"login"}, "login", "fish/login");
window.addEventListener("popstate", function(event){
if(event.state) {
var state = event.state.title;
switch(state) {
case "login":.............;break;
case "join" :.............;break;
case "home" :.............;break;
}
}
}, false);实例
下面以一个具体实例来展示pushState的作用，注意地址栏的变化。
效果
两次点击白色圆环改变页面背景，将在当前浏览器历史会话（window.history）中写入两条新记录：“/pushState.html?state=blue”和“/pushState.html?state=org”。 点击浏览器后退/前进按钮相当于执行history.back()与history.forward()方法，将触发onpopstate事件，通过监听onpopstate事件改变相应状态。
源代码
本实例在Chrome下编写调试，请在Chrome、Firefox、IE10+等现代浏览器中运行。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit" />
<head>
<title>pushState demo</title>
<style>
body {
font-family: "Microsoft YaHei";
transition: background-color .3s;
}
.bg-org {
color: #383c3c;
background-color: #FF6633;
}
.bg-blue {
color: #fbfaf5;
background-color: #6699FF;
}
.time {
margin-top: 20%;
text-align: center;
font-size: 4em;
font-weight: 100;
}
.switch {
margin: auto;
width: 30px;
height: 30px;
position:absolute;
bottom:25%;
left:0;
right:0;
cursor:pointer;
box-shadow: 0 0 0 5px rgba(255,255,255,.6);
border-radius: 50%;
transition: box-shadow .1s;
}
.switch:hover {
box-shadow: 0 0 0 5px rgba(255,255,255,.75);
}
.switch:active {
box-shadow: 0 0 0 30px rgba(255,255,255,.4);
}
</style>
</head>
<body class="bg-org">
<h1 id="time" class="time">Loading...</h1>
<div id="switch" class="switch"></div>
<script>
var time = $('#time');
function $(selector) {return document.querySelector(selector);}
// 显示当前时间
setInterval(function(){
var date = new Date(),
format = function(n) {return n<10?'0'+n:n};
time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds());
}, 500);
$('#switch').addEventListener('click', toggleState, false);
// 监听popstate事件
history.pushState && window.addEventListener("popstate", function(e) {
// 获取history.state对象中的状态信息
// 在这里state将自动成为event的子对象，可直接通过event.state访问
var flag = e.state && e.state.title;
$('body').className = flag || ($('body').className=='bg-org'?'bg-blue':'bg-org');
}, false);
function toggleState(e) {
var flag = $('body').className=='bg-org'?'bg-blue':'bg-org';
// 新建历史记录，将当前状态信息保存至history.state中
history.pushState && history.pushState({ title: flag }, flag, 'pushState.html?state='+flag.split('-')[1]);
$('body').className = flag;
}
</script>
</body>
</html>更多
replaceState
前面曾说过，pushState和replaceState的区别在于pushState会在浏览器中创建一条新历史纪录，而replaceState仅替换当前地址。 我们将上面的实例稍作修改，观察replaceState的具体表现。 替换history.pushState为history.replaceState： 
history.pushState && history.replaceState({ title: flag }, flag, 'pushState.html?state='+flag.split('-')[1]);对比运行结果可以看到，多次执行replaceState仅改变当前地址栏的URL，而没有创建新的历史记录。
window.location
下面我们再使用传统的window.location跳转，对比与pushState的区别。 
<script>
if(urlParam('state')=='blue') {
$('body').className = 'bg-blue';
} else {
$('body').className = 'bg-org';
}
var time = $('#time');
function $(selector) {return document.querySelector(selector);}
// 显示当前时间
setInterval(function(){
var date = new Date(),
format = function(n) {return n<10?'0'+n:n};
time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds());
}, 500);
$('#switch').addEventListener('click', toggleState, false);
function toggleState(e) {
var flag = $('body').className=='bg-org'?'bg-blue':'bg-org';
window.location = location.pathname + '?state=' + flag.split('-')[1];
$('body').className = flag;
}
/**
* 获取url参数
* @param {String} name 参数名
* @return {String} 参数值
*/
function getUrlParam(name){
var reg, value;
reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
value = window.location.search.substr(1).match(reg);
return value==null?null:decodeURI(value[2]);
}
</script>可以看到使用传统location跳转将会造成页面重载，虽然在功能上能够达到同样的目的，但在用户体验上将大打折扣。
#hash
最后再来介绍另一种无刷新技巧window.location.hash的使用。 URL中#称为位置的标识符，代表网页中的一个位置，当浏览器读取这个URL后，会自动将可视区域滚动至所定义的锚点处。HTTP请求中不包括#，也就是说改变#后的内容不会向服务器发起请求，因此也就不会引起页面重载。 window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。 当#值发生变化时，就会触发onhashchange事件。 
<script>
var time = $('#time');
function $(selector) {return document.querySelector(selector);}
// 显示当前时间
setInterval(function(){
var date = new Date(),
format = function(n) {return n<10?'0'+n:n};
time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds());
}, 500);
// 监听onhashchange事件
window.addEventListener("hashchange", function(e) {
// 获取hash值判断页面状态
var flag = location.hash && location.hash.substring(1);
$('body').className = 'bg-'+flag || ($('body').className=='bg-org'?'bg-blue':'bg-org');
}, false);
$('#switch').addEventListener('click', toggleState, false);
function toggleState(e) {
var flag = $('body').className=='bg-org'?'bg-blue':'bg-org';
// 在url中写入新的hash值
location.hash = flag.split('-')[1];
$('body').className = flag;
}
</script>需要注意的是每次hash发生变化时都会触发onhashchange事件。而onpopstate事件只会在历史记录(history entry)变化时触发，比如执行浏览器的前进/后退操作。
最后
本文介绍了pushState/ replaceState诞生的背景以及API的使用。又通过一个简单的实例与location，hash等技术进行了对比。相信大家已经可以很直观的看到pushState 和 replaceState的作用及区别。如有错误的地方欢迎交流指正。 随着HTML5标准的确定，pushState与ajax技术，将会在单页应用中发挥越来越重要的作用，国外也有一个叫pjax（pushState+ajax）的库将它们予以封装。
参考
- https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
- http://www.cnblogs.com/silin6/p/linkFly_pushState.html?utm_source=tuicool
- http://www.cnblogs.com/yeer/archive/2013/01/21/2869827.html
通过history.pushState无刷新改变url的更多相关文章
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
- HTML5之pushstate、popstate操作history，无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- HTML5无刷新修改Url,history pushState/replaceState
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
随机推荐
- lua5.3调用C/C++
马上面临毕业设计,打算做点跟网游有关的,先从做周边工具开始,目前正在做一个协议序列化和反序列化的东西,广告一波先: https://github.com/Anti-Magic/rproto 目前非常简 ...
- 在Hadoop分布式文件系统的索引和搜索
FROM:http://www.drdobbs.com/parallel/indexing-and-searching-on-a-hadoop-distr/226300241?pgno=3 在今天的信 ...
- sql之表连接和group by +组函数的分析
1.首先我们来先看一个简单的例子: 有[Sales.Orders]订单表和[Sales.Customers]顾客表,表的机构如下 业务要求:筛选 来自“按时打算”国家的用户以及所下的订单数 sele ...
- [JavaScript] js 判断闰年
/** * 判断闰年函数 * @param {number} year 要判断的年份 * @return {bool} 返回布尔值 * * 其实只要满足下面几个条件即可. * 1.普通年能被4整除且不 ...
- 基于局部敏感哈希的协同过滤算法之simHash算法
搜集了快一个月的资料,虽然不完全懂,但还是先慢慢写着吧,说不定就有思路了呢. 开源的最大好处是会让作者对脏乱臭的代码有羞耻感. 当一个做推荐系统的部门开始重视[数据清理,数据标柱,效果评测,数据统计, ...
- PAT-乙级-1021. 个位数统计 (15)
1021. 个位数统计 (15) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一个k位整数N = dk-1 ...
- windows下游戏服务器端框架Firefly安装说明及demo运行
原地址:http://blog.csdn.net/wangqiuyun/article/details/11150503 本来公司一个网游服务器端选定了pomelo框架,后来出了个Firefly,为做 ...
- MySQL exist
http://www.cnblogs.com/glory-jzx/archive/2012/07/19/2599215.html http://www.w3school.com.cn/sql/func ...
- CodeForces 299A Ksusha and Array
http://codeforces.com/problemset/problem/299/A 题意 :输入n个数,要求找出一个数能让其他所有的数整除,如果没有的话输出-1.有多个的话输出其中一个. 思 ...
- SaaS系列介绍之三: SaaS的特性与作用
1 SaaS的特性 最早的SaaS服务之一当属在线电子邮箱,极大地降低了个人与企业使用电子邮件的门槛,进而改变了人与人.企业与企业之间的沟通方式.发展至今,SaaS服务的种类与产品已经非常丰富,面向个 ...