详细用法和降级处理:
利用pushState开发无刷页面切换
HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
尽 管是上面讲到的《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)
相关推荐
ajax与HTML5 history pushState:replaceState实例1
window.history.back();...history.pushState与history.replaceState history.pushState会增加一条历史记录, history.replaceState会替换而不会增加,所以会更舒适一点。 以上所述是小编给大家介绍的HTML
HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与[removed] 配合使用。 二、pushState() 方法的例子 假设在 http://mozilla.org/foo.html 中...
history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了。 虽然各种HTML5文档说 [removed] 事件可以拦截 pushState 的消息,但在实际的...
主要介绍了HTML5 history新特性pushState、replaceState及两者的区别 的相关资料,需要的朋友可以参考下
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。 与传统的AJAX的区别 传统的ajax有如下的问题: 1、可以无刷新改变页面内容,但无法改变页面URL 2、...
尽管也存在一些,但由于您只能使用本机HTML5 History API,因此它们相对较小。 如果您打算支持旧版浏览器,那么可以使用History.js。 该通知位于此处,因为History.js没有获得足够的资金来维护,因此它仅在旧版...
可以完全按照例如Dive Into HTML5书( )或History API规范( )中的描述使用该库 )。 您可以使用以下命令安装此插件: npm install html5-history-api 浏览器支持: history.js -IE8 +和其他浏览器 history....
前端项目-html5-history-api,不支持pushstate、replaceState的浏览器的HTML5历史API扩展
BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副...
最后,它当前不支持history.replaceState或pushState的状态参数如果您希望使用能解决所有这些情况的驱动程序,则可以考虑使用驱动程序,该驱动程序是针对同一问题的包括电池的方法。原料药makePushStateDriver () ...
主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
HTML5 History两个新增的API:history.pushState 和 history.replaceState,两个 API 都会操作浏览器的历史记录,而不会引起页面的刷新。 Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( ...
history.pushState(state, title, url); history.replaceState(state, title, url); onpopstate 会监听 go()/back()/forward()操作 [removed] = function(){} // 监听hash值改变,可以通过location.hash 获取或设置...
主要介绍了深入探究HTML5的History API,重点讲述了HTML5中新的方法history.pushState()和history.replaceState(),需要的朋友可以参考下
实际上关键词叫 微信pushState只能分享落地页 更贴切...vue-router的内部是通过 history.pushState 和 history.replaceState 实现的。但是iOS设备的微信浏览器不会去检测它们的变化。但是我们可以通过更新 location.hre
h5路由通过在 window 对象上监听 popstate 事件,注:调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript...