HTML5 简介（三）：利用 History API 无刷新更改地址栏 - Blog - Renfei SongHTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。简单来说：假设当前页面为renfei.org/，那么执行下面的 JavaScript 语句：window.history.pushState(null, null, &/profile/&);之后，地址栏的地址就会变成renfei.org/profile/，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。pushState 方法上面的语句实际上用到了 HTML5 的历史记录 API。这套 API 提供一种「人为操纵」浏览器历史记录的方法。浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。执行pushState函数之后，会往浏览器的历史记录中添加一条新记录，同时改变地址栏的地址内容。它可以接收三个参数，按顺序分别为：一个对象或者字符串，用于描述新记录的一些特性。这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。一个字符串，代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。一个字符串，代表新页面的相对地址。例如，我们可以这样写：var state = {
name: &profile&
window.history.pushState(state, &My Profile&, &/profile/&);popstate 事件当用户点击浏览器的「前进」、「后退」按钮时，就会触发popstate事件。你可以监听这一事件，从而作出反应。window.addEventListener(&popstate&, function(e) {
var state = e.state;
// do something...
});这里e.state就是当初pushState时传入的第一个参数。例如，在我们的例子中，有：e.state.id == 2;
e.state.name == &profile&;replaceState 方法有时，你希望不添加一个新记录，而是替换当前的记录（比如对网站的 landing page），则可以使用replaceState方法。这个方法和pushState的参数完全一样。应用：全站 AJAX，并使浏览器能够抓取 AJAX 页面这个可以干啥用？一个比较常用的场景就是，配合 AJAX。假设一个页面左侧是若干导航链接，右侧是内容，同时导航时只有右侧的内容需要更新，那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样，地址栏是不会改变的，用户无法前进、后退，也无法收藏当前页面或者把当前页面分享给他人；搜索引擎抓取也有困难。这时，就可以使用 HTML5 的 History API 来解决这个问题。思路：首先绑定click事件。当用户点击一个链接时，通过preventDefault函数防止默认的行为（页面跳转），同时读取链接的地址（如果有 jQuery，可以写成$(this).attr('href')），把这个地址通过pushState塞入浏览器历史记录中，再利用 AJAX 技术拉取（如果有 jQuery，可以使用$.get方法）这个地址中真正的内容，同时替换当前网页的内容。为了处理用户前进、后退，我们监听popstate事件。当用户点击前进或后退按钮时，浏览器地址自动被转换成相应的地址，同时popstate事件发生。在事件处理函数中，我们根据当前的地址抓取相应的内容，然后利用 AJAX 拉取这个地址的真正内容，呈现，即可。最后，整个过程是不会改变页面标题的，可以通过直接对document.title赋值来更改页面标题。其他说明URL 的限制为了安全考虑，新 URL 必须和当前 URL 在同一个域名下。例如，你不能把地址改成 Google 的首页。否则不怀好心的人就可以把地址改成网银等关键网站的地址，来迷惑用户了。但是，URL 允许使用 query string 的形式。例如：window.history.pushState(null, null, &?id=1&);在某些情况下可能比较方便。浏览器兼容性根据 ，IE 10, Chrome 5, Firefox 4, Safari 5 开始支持这个特性。Fallback 可以采用替换 hash 的方法。另外， 库也提供了对老版本浏览器的 history API 支持（同样是利用替换 hash）。为了搜索引擎收录，可能需要使用#!表示法。&来自话题&&/&相关文章讨论Please enable JavaScript to view the comments powered by Disqus.History&对象
History&对象包含用户（在浏览器窗口中）访问过的&URL。
History&对象是&window&对象的一部分，可通过&window.history&属性对其进行访问。
注释：没有应用于&History&对象的公开标准，不过所有浏览器都支持该对象。
History&对象属性
length:返回浏览器历史列表中的&URL&数量。
History&对象方法
back()：加载&history&列表中的前一个&URL。即后退
forward():加载&history&列表中的下一个&URL。即前进
go():加载&history&列表中的某个具体页面。这个是最常用的
History&对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History&对象不再允许脚本访问已经访问过的实际&URL。
咱们来接着说两个HTML5&history新增的好哥们：History.pushState()和History.replaceState()
history.pushState(state,&title,&url)
意思就是把一个history记录插入到历史记录中。
state：与要跳转到的URL对应的状态信息。
title：页面标题。
url：要跳转到的URL地址，不能跨域。
history.replaceState(state,&title,&url)
用新的state和URL替换当前。不会造成页面刷新。
state：与要跳转到的URL对应的状态信息。
title：页面标题。
url：要跳转到的URL地址，不能跨域。
window.onpopstate
history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
大致的思路就是自己创建一个对象记录，然后把它插入到浏览器的历史记录，点击浏览器的前进后退按钮会触发onpopstate，然后判断当前的记录做对应的操作。
与传统的AJAX的区别
传统的ajax有如下的问题：
虽然ajax可以无刷新改变页面内容，但无法改变页面URL
其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState,&history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。
注意事项：
1、onpopstate只有在点击浏览器的前期和后退才会触发；
2、pushState能够改变浏览器地址栏中的hash，但是它不会触发hashchange事件，所以想通过监听hashchange来执行是无效的。
3、pushState不会刷新页面，刷新页面咱就压根不会用它了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1945次
排名：千里之外
原创：11篇
转载：19篇
(1)(1)(2)(5)(1)(6)(14)JavaScript（4）
在浏览器中改变地址栏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接口为例：
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.
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&
charset="UTF-8"&
http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"&
name="renderer" content="webkit" /&
&pushState demo&
font-family: "Microsoft YaHei";
transition: background-color .3s;
color: #383c3c;
background-color: #FF6633;
.bg-blue {
color: #fbfaf5;
background-color: #6699FF;
margin-top: 20%;
text-align: center;
font-size: 4em;
font-weight: 100;
margin: auto;
width: 30px;
height: 30px;
position:absolute;
bottom:25%;
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);
class="bg-org"&
id="time" class="time"&Loading...&
id="switch" class="switch"&&
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());
$('#switch').addEventListener('click', toggleState, false);
history.pushState && window.addEventListener("popstate", function(e) {
var flag = e.state && e.state.
$('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.pushState && history.pushState({ title: flag }, flag, 'pushState.html?state='+flag.split('-')[1]);
$('body').className =
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的区别。
if(urlParam('state')=='blue') {
$('body').className = 'bg-blue';
$('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());
$('#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 =
function getUrlParam(name){
reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
value = window.location.search.substr(1).match(reg);
return value==null?null:decodeURI(value[2]);
可以看到使用传统location跳转将会造成页面重载，虽然在功能上能够达到同样的目的，但在用户体验上将大打折扣。
最后再来介绍另一种无刷新技巧window.location.hash的使用。
URL中#称为位置的标识符，代表网页中的一个位置，当浏览器读取这个URL后，会自动将可视区域滚动至所定义的锚点处。HTTP请求中不包括#，也就是说改变#后的内容不会向服务器发起请求，因此也就不会引起页面重载。
window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
当#值发生变化时，就会触发onhashchange事件。
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());
window.addEventListener("hashchange", function(e) {
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';
location.hash = flag.split('-')[1];
$('body').className =
需要注意的是每次hash发生变化时都会触发onhashchange事件。而onpopstate事件只会在历史记录(history entry)变化时触发，比如执行浏览器的前进/后退操作。
本文介绍了pushState/ replaceState诞生的背景以及API的使用。又通过一个简单的实例与location，hash等技术进行了对比。相信大家已经可以很直观的看到pushState 和 replaceState的作用及区别。如有错误的地方欢迎交流指正。
随着HTML5标准的确定，pushState与ajax技术，将会在单页应用中发挥越来越重要的作用，国外也有一个叫（pushState+ajax）的库将它们予以封装。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3308次
排名：千里之外
原创：16篇尽管是上面讲到的《JavaScript高级程序设计》(第二版)中提到，BOM中的location.path/query&& (window.location)在通过JavaScript更改以后，浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置。。)
而在JavaScript MVC开始流行之后，通过刷新来修改URL的方法，不禁让人感到烦躁。然而HTML5中就制定了一个这样的API，可以通过方法的方式来修改URL，而又不会使浏览器刷新，就是History API。
熟悉JavaScript开发的同学，对History肯定不会陌生，其中最经典的方法就是go，通过第一个类型为整数的传输参数，可以使浏览器到达当前页面之前或之后，曾经浏览过的页面。当然，这个也是要刷新来实现的。
现在History API新增了两个方法，分别是pushState和replaceState，其实用法都一样，看Mozilla的文档也没看到它们有多大不同，哈哈。
用法如下：
var state = { //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
title : "HTML 5 History API simple demo",
&url : "yourpage"
&history.pushState(state, "HTML 5 History API simple demo", "yourpage");
还算简单吧，那么replaceState也是同样的用法：
var state = { //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
&title : "HTML 5 History API simple demo",
url : "yourpage"};
history.replaceState(state, "HTML 5 History API simple demo",&"yourpage");
State Event
既然有无刷新改变URL的方法，当然也要有响应这个改变的时间啦。
嗯，没错。就有一个popstate事件，而传入的handler函数有一个参数，就是之前在pushState的第一个参数，一个State obj。开发者可以通过这个State obj来识别行为。详细代码如下：
var state = { //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
title : "HTML 5 History API simple demo",
url : "yourpage"
history.pushState(state, "HTML 5 History API simple demo", "yourpage");
window.onpopstate = function (e) { document.title = e.state.}
当然还可以这样：
var state = { //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
action : "page",
&title : "HTML 5 History API simple demo",
url : "yourpage"
history.pushState(state, "HTML 5 History API simple demo", "yourpage");
window.onpopstate = function (e) {
switch (e.state.action) {
&case "home" :
&&& document.title = "HOME &&";
&&& $.get("index.php").done(function (data) { $("#wrapper").html(data); });
&& case "page" :
&&&& document.title = e.state.
&&& &$.get(e.state.url).done(function (data) { $("#wrapper").html(data); });
上面这个是结合pushState和Ajax做的一个导航相应器(Navigation Handler)，其实已经有一个不错的jQuery插件了，。
阅读(...) 评论()HTML5的History API介绍
热度 1已有 18471 次阅读 13:41
|个人分类:|系统分类:|
大家在浏览Facebook的相册时有没有发现，页面局部刷新的同时地址栏的地址也改变了，而且不是hash的方式。它使用的就是HTML5
history新增的几个API，作为window的一个全局变量，在HTML4的时代history已不是什么新鲜的事物了。我们经常使用的就有
history.back()以及history.go() 。下面我们来了解下history都有哪些改变。1. HTML4时代的history API
A) history.length：当前历史列表中的历史记录数（我大概测了下，IE6+是从0开始的，其他的是从1开始的，若有误请反馈哈，^_^）； B) history.go(n)：前进或后退n条记录，当n=0或空时会刷新当前页； C) history.back()：后退一步； D) history.forward()：前进一步;
2. HTML5新增的APIA)
history.pushState(data, title [,
url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会
忽略此参数；url为页面地址，可选，缺省为当前页地址； B) history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上； C) history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样； D) window.onpopstate：响应pushState或replaceState的调用；有
了这几个新的API，针对支持的浏览器，我们可以构建用户体验更好的应用了。就像刚提到的Facebook相册，虽然是AJAX的方式，但用户可以直接复
制页面地址分享给好友，好友打开看到的就是AJAX加载的数据，做到了书签化。当然这里面需要做的工作远不是说的这么简单。
3. 浏览器的兼容性&检测在HTML5支持不一的时代，新的API总会存在或这或那的兼容性问题。因此我们有必要了解新接口在不同浏览器下的兼容性。&截图来自:《Manipulating the browser history》如何检测浏览器是否支持History API？
function supports_history_api() {
return !!(window.history && history.pushState);
&如何检测history.state的兼容性呢？我尝试赋值history.state=1，但history.state在不同浏览器下的读写权限不一样，所以我们换种方式：
var originalHistoryState = history.
// 保存原有的历史信息
history.replaceState(1, null);
// 替换当前历史信息
var stateSupport = history.state == 1;
// 是否存储到刚设置的历史信息
history.replaceState(originalHistoryState, null); // 恢复原来的历史信息
&4. 安全性我们看一个例子：DEMO页面在的域名下，用户点击“付款”链接尝试加载另一个域名的某张图片。可以看到，当我们尝试改变当前地址为一个协议不同、（子）域名不同的地址时，会触发相应的错误。新API在安全性方面作了考虑，所以还是安全的。
5. AJAX Bookmark – AJAX书签化有了新API的支持，我们可以针对不同浏览器作一些差异化的用户体验。尤其是在AJAX盛行的年代，无历史记录已经是一大诟病。为了解决AJAX的书签化问题，我们需要解决的主要是以下2个问题：1. 浏览器对新的HTML5& History API的支持不一； 2. 不支持的浏览器我们如何解决前进/后退的问题 ；对于问题1，我们采用的是hash方案，这也是很多方案采用的办法了；主要原理这里不细说了，大家可以搜索一下。下面是我写的解决方案；大家可以参考下，欢迎互相探讨。github地址：6. 一些参考文档
W3C html5 history：
Introducing the HTML5 History API：
Manipulating the browser history：
Detecting HTML5 Features：
window.history：
window.onpopstate：
MooTools onhashchange：
作者的其他最新日志
评论 ( 个评论)
今日关注 /7
　　唐代诗人王之涣存诗不多，但其作为边塞诗人的大名几乎无人不晓。至于古典文学爱好者，也一定听说过被誉为盛唐文学界交游美谈的王之涣、王昌龄与高适的“旗亭画壁”的故事。然而细考之，却发现如此著名的诗人相关史料却极少，屈指可数的几条记录又皆为不确，真令人如坠迷雾。
　　左宗棠，戎马一生，兢兢业业，战天国、兴洋务、平甘陕、收新疆，功勋卓著，乃晚清一代名臣。但晚年的左宗棠逢人便讲西征、骂曾国藩，群僚皆以为苦，颇有怨言，被人广为诟病。然而，瑕不掩瑜，左宗棠收复新疆，成为晚清腐败政治中一道光耀的亮点。
　　广东出产名茶，广东人热爱饮茶，广东茶文化独步天下，广东茶文化当中的潮州功夫茶如今更是遍地开花。但是，如果要追寻茶文化的历史，我们就只能止步于明清两朝了，因为广州茶市和潮州功夫茶是从明清时期才大放异彩的。唐朝有个叫曹松的人，把茶树移栽到了广东。
　　茄子的野生品种在印度、东南亚、马达加斯加、毛里求斯等地都有发现，五千年前印度河谷的先民就采集茄子作为食品。茄子最晚在西汉末已经从印度传到了四川。四川和印度在上古就有商道相通，只是因为山路崎岖，沿途部落众多有抢劫阻碍，所以贸易规模不大而已。
　　从先秦至民国时期，中华法系也是一直设立通奸罪。如果对中国历史上通奸罪罚的演变趋势做一种鸟瞰式的观察，我们会发现它恰好呈现出一个“U”形轨迹：前期重罪化，中期轻罪化，后期又重罪化。总的来说，处于秦汉与元明清之中间的宋王朝，对通奸罪的处置是最合乎现代文明的。
　　诸葛亮在荧屏中的形象，给我最大的印象莫过于总是手执鹅毛扇，无论夏天还是冬天，无论在面对险情还是酝酿各种谋略，总是手执鹅毛扇，轻轻扇动几下，惊动天下的谋略就出来了，有人说诸葛亮的智慧来自于鹅毛扇，诸葛亮所有的神奇都因为拥有这把鹅毛扇。
　　杨玉环于开元七年农历六月初一生于宦门世家，有倾国倾城的美貌，而且能歌善舞，聪慧过人，唐玄宗也因此迷恋上了杨贵妃，对后宫其她妃嫔就置若罔闻，不为动情，唯独偏爱杨贵妃，可谓是集三千宠爱在一身。唐玄宗如此宠爱杨贵妃，为何没有立杨贵妃为皇后呢?
光明网版权所有