`

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

 
阅读更多
[size=large]尽管是上面讲到的《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)。[/size]


转载http://hi.baidu.com/kooboy/item/d0138bd2276d9d16d90e44b1
分享到:
评论

相关推荐

    页面禁止各种浏览器后退.txt

    HTML5引入了一个新的API——History API,它允许JavaScript改变浏览器的历史记录栈,而不必重新加载整个页面。这个API提供了以下三个方法: - **`pushState()`**:向历史记录栈添加一个新的条目。 - **`...

    Node.js-history-server一个用于单页应用的HTTP服务器使用HTML5historyAPI实现

    3. 配置SPA:在前端代码中,正确使用History API,例如通过`history.pushState()`或`history.replaceState()`更改URL。 4. 访问SPA:现在,SPA可以通过`history-server`启动的服务器地址进行访问,即使直接输入SPA...

    使用ajax实现无刷新改变页面内容和地址栏URL

    HTML5引入了新的API —— window.history.pushState和window.history.replaceState,这两个方法允许我们改变浏览器地址栏中的URL,并且操作浏览器的历史记录。pushState方法会将指定的URL添加到浏览器历史记录中,而...

    PHP实例开发源码—emlog博客start主题(含pjax无刷新) php版.zip

    Pjax是一种优化Web应用的技术,结合了Ajax(异步JavaScript和XML)和HTML5的History API(pushState和replaceState)。它可以在用户点击链接时,仅更新页面的一部分,而不是整个页面,从而实现页面的无刷新加载。...

    详解SPA中前端路由基本原理与实现方式

    通过`pushState`和`replaceState`方法,我们可以改变URL并更新历史记录,而`popstate`事件则用来监听这些改变。然而,这种方法需要服务器配置支持,因为所有请求都应指向同一个HTML入口文件,由前端处理路由。 ```...

Global site tag (gtag.js) - Google Analytics