一篇文章带你了解JavaScript Window History

Karen110
• 阅读 1357

一、前言

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

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

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

二、history对象

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

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

三、获取访问的页面数

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

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

完整代码:


<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<p>历史记录列表中的URL数:</p>

<p id="para"></p>

<p> <b>注意:
     </b>本示例在新框架中打开,并将被视为新的"会话":</p>

<script>
var result = history.length;
document.getElementById("para").innerHTML = result;
</script>

</body>
</html>

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

一篇文章带你了解JavaScript Window History

1. 返回上一页

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

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

<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua">

<button onclick="history.back();">Go Back</button>

<p><b>Note:</b> 单击此处的“后退”按钮将不会执行任何操作,因为历史记录列表中没有先前的URL</p>

</body>
</html>

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

一篇文章带你了解JavaScript Window History

2. 前进到下一页

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

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


<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<button onclick="history.forward();">前进</button>

<p> <b>注意:</b>单击此处的"前进"按钮将不会执行任何操作,因为历史记录列表中没有下一个URL:</p>

</body>
</html>

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

一篇文章带你了解JavaScript Window History

3. 转到特定页面

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

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

<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<button onclick="history.go(-2);">回退第2页</button>

<p> <b>注意:</b>单击此处的"回退第2页"按钮将不会执行任何操作,因为历史记录列表中没有先前的URL。</p>

</body>
</html>

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

一篇文章带你了解JavaScript Window History

四、总结


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

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

使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript Window History

往期精彩文章推荐:

一篇文章带你了解JavaScript Window History

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
JavaScript的BOM和DOM
1,window对象,所有浏览器都支持window对象,它表示浏览器窗口BOM(browserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话".DOM(DocumentObjectModel)是指文档对象类型,通过它,可以访问HTML文档的所有元素window对象客户端JavaScript最高
Stella981 Stella981
3年前
HTML5之pushstate、popstate操作history,无刷新改变当前url
一、认识window.historywindow.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。1、历史记录的前进和后退在历史记录中
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这