详解HTML5之pushstate、popstate操作history无刷新改变当前url代码实例

这篇文章主要介绍了HTML5之pushstate、popstate操作history,无刷新改变当前url的相关资料,需要的朋友可以参考下

// 当前的url为：http://qianduanblog测试数据/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog测试数据/post-1.html"); 

// 当前的url为：http://qianduanblog测试数据/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到：http://qianduanblog测试数据/index.html
    // 获得的json为null
    // 再点击一次前进到：http://qianduanblog测试数据/post-1.html
    // 获得json为{time:1369647895656}
} 

值得注意的是：javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。

还有一点注意的是，谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的，谷歌浏览器奇怪的是回触发onpopstate事件，而火狐浏览器则不会。

以上就是详解HTML5之pushstate、popstate操作history无刷新改变当前url代码实例的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于详解HTML5之pushstate、popstate操作history无刷新改变当前url代码实例的详细内容...