查看: 704|回复: 0

[DIV/CSS] JavaScript浏览器之history

发表于 2018-5-11 08:00:00

基本概念

history对象保存着用户上网的历史记录,从窗口打开的那一刻算起。
每个浏览器窗口、标签页或框架都有自己的history对象。

history对象常用属性

history.length:保存历史记录的数量。这个数量包括所有向前和向后的记录。一般用于检测当前页面是不是用户历史记录中的第一个页面。
IE和Opera从0开始,而Firefox、Chrome和Safari从1开始。

测试代码:

  1. setTimeout(function(){
  2. location.href=location.href+"#ID";
  3. alert("当前页面历史记录数量: "+history.length)
  4. }, 500)
复制代码

history对象常用方法

1、history.go(number|URL):跳转到历史记录列表中的某个具体的页面。
这个方法接收一个参数:如果参数是数字,表示向前或向后跳转的页面数的一个整数值(1向前跳一个页面,-1向后跳一个页面);
如果参数是字符串,字符串必须是局部或完整的URL,此时浏览器会跳转到历史记录中包含该字符串的第一个位置。

测试代码:

  1. setTimeout(function(){
  2. location.href=location.href+"#ID";
  3. alert("当前页面历史记录数量: "+history.length);
  4. setTimeout(function(){
  5. history.go(-1);
  6. alert("后退一个页面")
  7. setTimeout(function(){
  8. history.go(1);
  9. alert("前进一个页面");
  10. }, 500)
  11. }, 500)
  12. }, 500)
复制代码

2、history.back():跳转到历史记录列表中的前一个URL,效果等价于点击后退按钮或调用 history.go(-1)。
3、history.forward():跳转到历史记录列表中的下一个 URL,效果等价于点击前进按钮或调用 history.go(1)。


HTML5的history.pushState()方法

引入目的:

Ajax可以实现在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,这就导致浏览器的“后退”和“前进”按钮失去了作用。

参数说明:

history.pushState(state,title,URL):

state:创建一个JavaScript对象,当执行pushState()方法后,这个对象就会被加入到历史状态栈,这个对象的最大存储空间为640k。
title:目前还没有浏览器实现,可以传入一个空字符串或一个短标题即可。
URL:添加到浏览器地址栏的新的相对URL,但是这个新的URL不会真的向服务器发送请求,它只是单纯地在历史记录列表里添加一条记录,并将指针指向这个记录。

测试代码:

  1. <button>添加历史记录</button>
  2. <button onclick="history.go(-1)">后退</button>
  3. <button onclick="history.go(1)">前进</button>
  4. <h1>历史记录长度:<span> </span></h1>
  5. <h1>当前是:<span> </span></h1>
  6. <h1>Hash值:<span> </span></h1>
  7. var add=document.getElementsByTagName('button')[0],
  8. len=document.getElementsByTagName('span')[0],
  9. num=document.getElementsByTagName('span')[1],
  10. hash=document.getElementsByTagName('span')[2],
  11. i=0,
  12. apples=["red","green","yellow"];
  13. for(;i<apples.length;i++){//添加三条历史记录
  14. (function(i){
  15. add.addEventListener("click",function(){
  16. history.pushState({data: apples[i]},null,"#"+apples[i]);
  17. len.firstChild.data=history.length;
  18. })
  19. })(i)
  20. }
  21. window.addEventListener("popstate",function(event){
  22. if(event.state){
  23. num.firstChild.data=event.state.data;
  24. }else{
  25. num.firstChild.data="";
  26. }
  27. })
  28. window.addEventListener("hashchange",function(event){
  29. hash.firstChild.data=location.hash.slice(1);
  30. })
复制代码

注意:

popstate事件:按下“后退”按钮就会触发window的popstate事件,popstate事件的event对象有一个state属性,这个属性保存着history.pushState()方法中的state参数。当浏览器加载到第一个页面时,event.state值为null。
hashchange事件:当URL的锚部分(以'#'号为开始)发生改变时触发hashchange事件,但执行history.pushState()方法时不会触发hashchange事件。

history.replaceState(state,title,URL)

和history.pushState()的用法完全一致,只不过它不会在历史记录列表中创建新的历史记录,只会重写当前记录。

测试代码:

  1. <button>添加历史记录</button>
  2. <button onclick="history.go(-1)">后退</button>
  3. <button onclick="history.go(1)">前进</button>
  4. <button>修改历史记录</button>
  5. <h1>历史记录长度:<span> </span></h1>
  6. <h1>当前是:<span> </span></h1>
  7. <h1>Hash值:<span> </span></h1>
  8. var add=document.getElementsByTagName('button')[0],
  9. xiu=document.getElementsByTagName('button')[3],
  10. len=document.getElementsByTagName('span')[0],
  11. num=document.getElementsByTagName('span')[1],
  12. hash=document.getElementsByTagName('span')[2],
  13. i=0,
  14. apples=["red","green","yellow"];
  15. for(;i<apples.length;i++){//添加三条历史记录
  16. (function(i){
  17. add.addEventListener("click",function(){
  18. history.pushState({data: apples[i]},null,"#"+apples[i]);
  19. len.firstChild.data=history.length;
  20. })
  21. })(i)
  22. }
  23. xiu.addEventListener("click",function(){
  24. history.replaceState({data: "blue"},null,"#blue");
  25. })
  26. window.addEventListener("popstate",function(event){
  27. if(event.state){
  28. num.firstChild.data=event.state.data;
  29. }else{
  30. num.firstChild.data="";
  31. }
  32. })
  33. window.addEventListener("hashchange",function(event){
  34. hash.firstChild.data=location.hash.slice(1);
  35. })
复制代码

文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。



回复

使用道具 举报