justcode.ikeepstudying.com
使用pushState()改变url而不刷新, ajax与HTML5 history pushState/replaceState实例, 详解history.pushState和history.replaceState以及page ajax的实现 - Just Code
我们使用location.hash来模拟ajax的前进后退功能。使用location.hash存在下面几个问题: 1.使用location.hash会导致地址栏的url发生变化,用户体验不够友好。 2.location.hash产生的历史记录无法修改,每次hash改变都会导致产生一个新的历史记录。 3.location.hash只是1个字符串,不能存储很多状态相关的信息。 为了解决这些问题,HTML5中引入了history.pushState()、history.replaceState()、popstate事件来处理浏览器历史记录的问题。下面的代码可以达到跟location.hash相同的效果,可以看到地址栏url不会改变。 效果如下:实例DEMO 1 | 实例DEMO 2 | 实例DEMO 3 HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。 简单来说:假设当前页面为justcode.ikeepstudying.com,那么执行下面的 JavaScript 语句: window.history.pushState(null, null, "/profile/"); 之后,地址栏的地址就会变成justcode.ikeepstudying.com/profile/,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在。 state是什么? 状态对象(state object) — 一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。(原文) 说白了,state就是我们用于保存到history序列中的一个数据集合。我们可以在pushState之前,先构建自己的state,里面可以存放很多我们在监听window.popstate事件时所需要的东西。 例如,我们用代码来看: var state = { title: title, url: url, content: $('body').html(), prev: window.location.href, time: (new Date()).getTime() }; history.pushState(state, title, …