JS浏览器对象:History对象

History 对象

history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。

【注意】:
从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。

【语法】:

window.history.[属性|方法]

【注意】:window可以省略。

History 对象属性

length返回浏览器历史列表中的URL数量。

History 对象方法

back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个具体的页面。

【案例】使用length属性,当前窗口的浏览历史总长度,代码如下:

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

一、返回前一个浏览的页面

back()方法,加载 history 列表中的前一个 URL。

【语法】:

window.history.back();

【案例】比如,返回前一个浏览的页面,代码如下:

window.history.back();

【注意】:等同于点击浏览器的倒退按钮。
back()相当于go(-1),代码如下:

window.history.go(-1);

二、返回下一个浏览的页面

forward()方法,加载 history 列表中的下一个 URL。

【案例】如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下:

window.history.forward();

【注意】:等价点击前进按钮。
forward()相当于go(1),代码如下:

window.history.go(1);

三、返回浏览历史中的其他页面

go()方法,根据当前所处的页面,加载history列表中的某个具体的页面。

【语法】:

window.history.go(number);

【参数】:

1 前一个,go(1) 等价forward()
0 当前页面
-1 后一个,go(-1)等价back()
其它数值要访问的URL在history的URL列表中的相对位置。

【案例】浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:

window.history.go(-2);

【注意】:和在浏览器中单击两次后退按钮操作一样。

【案例】同理,返回当前页面之后浏览过的第三个历史页面,代码如下:

window.history.go(3);

end.
本笔记整理自慕课网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.1 window对象是BOM的核心,window对象指当前的浏览器窗口。 window对象方法: window...
    jasmine_jing阅读 419评论 0 0
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,326评论 0 5
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 投资是资本市场最热的词,每个人都在提,听得多了,让人产生一种幻象,认为投资是一件熟悉而又简单的事情,人人都可以做。...
    whoogaoqiao阅读 83评论 0 0