Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

浏览器history对象的几个新方法

  history对象很早以前就有了,它的功能是操作网页的历史记录。传统的history对象有:back、forward、go,这几个方法,它们用来前进、后退,或直接跳转到历史记录的某一个步骤。而现代浏览器加入了pushState和replaceState,使用它们则可以直接对历史记录堆栈进行操作。
  pushState方法的功能是在历史记录队列堆栈中加入一个新的记录,并把当前页面“跳转”到这个自己添加的“虚假”历史记录上。由于历史记录是“虚假”的,页面不会真正的跳转,而是地址栏里的URL发生变化。可以点击浏览器上的后退按钮来返回“跳转”前的页面。pushState方法有3个参数,第一个是数据参数,这个后面再说;第二个是历史记录的标题,这个参数貌似只是作为保留参数,目前的浏览器暂时不处理它,所以直接传如null就可以了;第三个参数是这个历史记录URL,也就是可以改变浏览器地址栏的URL,它可以使用绝对路径,但是不能跨域。
  replaceState方法的功能是修改当前页历史记录的数据。与其说是修改,不如说是创建一个新的“虚假”历史记录,把当前的历史记录替换掉。和上面的pushState一样,由于是“虚假”的,所以替换之后地址栏的地址会改变,但是页面不会跳转。这个函数的参数和pushState一样,就不重复了。其实pushState和replaceState的区别只是,前者在地址栏URL改变后可以通过浏览器的后退按钮返回跳转前的网页,而后者不行。
  接着来说说这个两个方法的第一个参数。这是一个数据参数,输入的东西是用户自己要保存的数据。现代浏览器的history对象中不仅仅是一个名称和一个URL,还有这个数据部分。也就是说,历史记录中还会留下上次访问那个页面时候在页面上留下的数据,当我们后退或者跳转回某个历史记录步骤的时候,就可以操作之前在这个页面上留下的数据。而这个参数就是设置我们制造的“虚假”历史记录里的数据,如果不用它可以直接送上一个null。
  历史记录数据的访问可以通过history对象的state属性。对于这个state,其实老外觉得它就是一个页面状态而已,我觉得理解为历史记录数据部分会更好,下面是个实例,其实也没啥太多东西。看看实例自己修改参数测试下就能明白。 <script>
//页面点击事件
document.onclick=function(){
  //输出当前页面的历史记录数据部分
  console.log(history.state);
  //创建一个“虚假”历史记录,并访问它
  history.pushState("次碳酸钴",null,"我是新的页面.html");
  //由于刚已经访问了新的历史记录
  //这里应该是输出我们刚创建的“虚假”历史记录的数据部分
  console.log(history.state);
};
</script>


  参考:
    MDN - Manipulating the browser history
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^