一篇文章带你了解JavaScript Window History

开发 前端
本文基于JavaScript基础,介绍了如何通过window.history访问 JavaScript浏览器对象,如何获取对应网页的页数 访问网页的上一页,下一页,访问特定的页面,都做了详细的讲解。通过用丰富的案例帮助大家更好理解。

[[397025]]

一、前言

window.history 对象可以不用窗口window前缀编写。为了保护用户的隐私,有限制的JavaScript可以访问此对象。

history.back() - 与点击浏览器中的back按钮相同。

history.forward() - 与点击浏览器中的forward按钮相同。

二、history对象

window.history对象包含浏览器会话历史记录,在当前框架或窗口中访问的所有页面的列表,window.history可以编写没有窗口前缀的对象。

但是,为了保护用户的隐私,JavaScript如何访问此对象存在一些限制。window.history 对象包含浏览器历史记录。

三、获取访问的页面数

该history.length属性返回浏览器会话历史记录中当前窗口的页面数,还包括当前加载的页面。

  1. var result = history.length; // 返回当前会话历史记录的大小 

完整代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"
  6.  
  7. <p>历史记录列表中的URL数:</p> 
  8.  
  9. <p id="para"></p> 
  10.  
  11. <p> <b>注意: 
  12.      </b>本示例在新框架中打开,并将被视为新的"会话":</p> 
  13.  
  14. <script> 
  15. var result = history.length; 
  16. document.getElementById("para").innerHTML = result; 
  17. </script> 
  18.  
  19. </body> 
  20. </html> 

 可以使用此属性来找出用户在当前浏览器会话期间访问了多少页面。

1. 返回上一页

该history.back()方法将历史记录列表中的上一个URL加载。

这与在浏览器中单击“后退按钮”相同。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua"
  6.  
  7. <button onclick="history.back();">Go Back</button> 
  8.  
  9. <p><b>Note:</b> 单击此处的“后退”按钮将不会执行任何操作,因为历史记录列表中没有先前的URL</p> 
  10.  
  11. </body> 
  12. </html> 

 上面的代码将显示以下输出。

2. 前进到下一页

该history.forward()方法将在历史记录列表中加载下一个URL。

这与在浏览器中单击“转发按钮”相同。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"
  6.  
  7. <button onclick="history.forward();">前进</button> 
  8.  
  9. <p> <b>注意:</b>单击此处的"前进"按钮将不会执行任何操作,因为历史记录列表中没有下一个URL:</p> 
  10.  
  11. </body> 
  12. </html> 

上面的代码将显示以下输出(如果历史记录列表中不存在下一页,则此示例将不起作用):

3. 转到特定页面

可以使用history.go()方法从会话历史记录中加载特定页面。

此方法将整数作为参数,负整数在历史记录中向后移动,正整数在历史记录中向后移动。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"
  6.  
  7. <button onclick="history.go(-2);">回退第2页</button> 
  8.  
  9. <p> <b>注意:</b>单击此处的"回退第2页"按钮将不会执行任何操作,因为历史记录列表中没有先前的URL。</p> 
  10.  
  11. </body> 
  12. </html> 

上面的代码将显示以下输出:

四、总结

本文基于JavaScript基础,介绍了如何通过window.history访问 JavaScript浏览器对象,如何获取对应网页的页数 访问网页的上一页,下一页,访问特定的页面,都做了详细的讲解。通过用丰富的案例帮助大家更好理解。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2022-01-21 11:28:59

window浏览器JavaScript

2023-06-09 15:25:39

JavaScript窗口屏幕

2023-07-14 14:56:47

JavaScriptwindow

2020-10-21 09:11:42

JavaScript

2020-10-21 09:20:03

JavaScript

2023-07-21 17:11:59

JavaScriptappName

2023-07-21 17:14:39

JavaScript浏览器Cookies

2021-03-09 14:04:01

JavaScriptCookie数据

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2021-03-05 18:04:15

JavaScript循环代码

2021-01-26 23:46:32

JavaScript数据结构前端

2024-04-19 14:23:52

SwitchJavaScript开发

2023-09-06 14:57:46

JavaScript编程语言

2023-07-30 15:18:54

JavaScript属性

2024-01-30 13:47:45

2021-06-24 09:05:08

JavaScript日期前端

2021-02-02 18:39:05

JavaScript

2020-11-10 10:48:10

JavaScript属性对象

2021-06-04 09:56:01

JavaScript 前端switch

2021-01-29 18:41:16

JavaScript函数语法
点赞
收藏

51CTO技术栈公众号