HTML5 HistoryAPI

最新推荐文章于 2025-01-23 00:00:00 发布

转载最新推荐文章于 2025-01-23 00:00:00 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/itmangelihai/archive/2012/09/16/2687572.html

文章标签：

#javascript #ViewUI

本文介绍了HTML5中History API的使用方法，包括如何利用pushState()和replaceState()方法来更新浏览器地址栏和历史记录，同时展示了如何监听页面历史记录的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5规范中，history对象提供了丰富的接口使得开发者可以方便的在历史记录中添加状态或改变状态，这样我们既可以使用javascript部分更新页面，又能更新地址栏和浏览器记录。

以前的解决方案

1、window.history.back(): 后退到上一个页面

2、window.history.forward()：前进到下一个页面

3、window.history.go()：跳转到某一个页面，go(0)代表刷新当前页面，go(-1)代表跳转到前一个页面，诸如此类

4、window.history.length：当前页面历史记录的条数

现在的解决方案

提供了两个新方法:pushState() 和 replaceState()，它允许我们添加和改变当前的浏览器地址。pushState用于向history对象添加当前页面的记录，并且改变浏览器地址栏的url，有三个参数，分别是state对象(一个javascript对象记录要插入到历史记录条目的相关信息)、标题、可选参数目标URL。

pushState(data, title ,[ url])。url不写时表示当前页面。实例代码如下:

history.pushState({username: "html5"}, "user account", "user.html");

attention: pushState()带来地址栏变化不会触发hash跳转。

replaceState()类似于pushState()，只是将当前页面的历史记录。参数这些与pushuState()一样。

另外HTML5还提供了onpopstate事件，该事件在窗口历史记录改变时被触发。示例代码:

window.onpopstate = function(event){
console.log(event.state);//输出pushState()或replaceState()设置的state状态
}

下面将演示一个简单的例子，用javascript更新页面内容时通过History API 来改变页面地址和历史记录。

<div id="click-item"></div>
<div id="result-item"></div>

<script>
   var clickItem = document.getElementById('click-item');
   var resultItem = document.getElementById('result-item');
   clickItem.onclick = function(){

       resultItem.innerHTML = 'clicked';
       history.pushState({note : "set result"} ,'' ,'result.html');
   }
</script>

单击click-item元素时，浏览器页面地址变为result.html，同时浏览器的历史记录也出现此页面的访问记录。

转载于:https://www.cnblogs.com/itmangelihai/archive/2012/09/16/2687572.html