码迷,mamicode.com
首页 > Windows程序 > 详细

HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

时间:2014-09-20 20:31:29      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:blog   http   io   java   ar   div   sp   cti   log   

尽 管是上面讲到的《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.title;}

当然还可以这样:

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); });

     break;

   case "page" :

     document.title = e.state.title;

     $.get(e.state.url).done(function (data) { $("#wrapper").html(data); });

   break;

 }

}

上面这个是结合pushState和Ajax做的一个导航相应器(Navigation Handler),其实已经有一个不错的jQuery插件了,jQuery-Pjax(pushState and Ajax)

http://www.cnblogs.com/maorongmaomao/archive/2012/02/20/2359341.html

HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

标签:blog   http   io   java   ar   div   sp   cti   log   

原文地址:http://www.cnblogs.com/daishuguang/p/3983597.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!