首页 > 代码库 > HTML5: History API 无刷新更改地址栏
HTML5: History API 无刷新更改地址栏
HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。
简单来说:假设当前页面为renfei.org/
,那么执行下面的 JavaScript 语句:
window.history.pushState(null, null, "/profile/");
之后,地址栏的地址就会变成renfei.org/profile/
,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在。
应用:全站 AJAX,并使浏览器能够抓取 AJAX 页面
这个可以干啥用?一个比较常用的场景就是,配合 AJAX。
假设一个页面左侧是若干导航链接,右侧是内容,同时导航时只有右侧的内容需要更新,那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样,地址栏是不会改变的,用户无法前进、后退,也无法收藏当前页面或者把当前页面分享给他人;搜索引擎抓取也有困难。这时,就可以使用 HTML5 的 History API 来解决这个问题。
思路:首先绑定click
事件。当用户点击一个链接时,通过preventDefault
函数防止默认的行为(页面跳转),同时读取链接的地址(如果有 jQuery,可以写成$(this).attr(‘href‘)
),把这个地址通过pushState
塞入浏览器历史记录中,再利用 AJAX 技术拉取(如果有 jQuery,可以使用$.get
方法)这个地址中真正的内容,同时替换当前网页的内容。
为了处理用户前进、后退,我们监听popstate
事件。当用户点击前进或后退按钮时,浏览器地址自动被转换成相应的地址,同时popstate
事件发生。在事件处理函数中,我们根据当前的地址抓取相应的内容,然后利用 AJAX 拉取这个地址的真正内容,呈现,即可。
最后,整个过程是不会改变页面标题的,可以通过直接对document.title
赋值来更改页面标题。
参考来源:http://www.renfei.org/blog/html5-introduction-3-history-api.html
HTML5: History API 无刷新更改地址栏