bom操作----history对象

最新推荐文章于 2023-03-23 21:11:10 发布

南初️

最新推荐文章于 2023-03-23 21:11:10 发布

阅读量347

点赞数 3

分类专栏： JavaScript 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_45806781/article/details/111394924

版权

JavaScript 专栏收录该内容

51 篇文章 6 订阅

订阅专栏

目录

一、length属性---返回历史列表中的网址数
二、加载history列表中的前一个 URL---back()
三、加载history列表中的下一个 URL---forward()
四、加载history列表中的某个具体页面--go()
五、pushState()----创建一条历史记录
六、replaceState()----修改当前的历史记录
七、禁止主界面系统回退
八、标签实现前进倒退

history对象是包含用户在浏览器上访问url的一些路径信息。

一、length属性—返回历史列表中的网址数

console.log(history.length);//1

二、加载history列表中的前一个 URL—back()

移动到上一个访问页面，等同于浏览器的后退键。
js代码里面的写法
	history.back();//后退

三、加载history列表中的下一个 URL—forward()

移动到下一个访问页面，等同于浏览器的前进键。
js代码里面的写法
   history.forward();//前进
index.html
	<a href="./1.html">1页面</a> 
	<a href="./2.html">2页面</a> 
	<a href="javascript:history.back()">后退</a> 
	<a href="javascript:history.forward()">前进</a> 
1.html
<body> 网页1 </body>
2.html
<body> 网页2 </body>

四、加载history列表中的某个具体页面–go()

接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。
参数为1：前进1；参数为-1：倒退1
参数为2：前进2；参数为-2：倒退2
history.go(0)相当于刷新当前页面。
js代码里面的写法
	history.go(1);//前进1
	<a href="./1.html">1页面</a> 
	<a href="./2.html">2页面</a> 
	<a href="javascript:history.go(-1)">后退</a> 
	<a href="javascript:history.go(1)">前进</a> 

五、pushState()----创建一条历史记录

history.pushState(data,title,url)–每执行一次都会增加一条历史记录，浏览器在返回时，就不会返回前一个页面了，
data：要设置的history.state的值，可以是任意类型的值，可根据此值进行判断执行想要的操作。
title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。
url：地址栏的值，若不需要可用空来代替。
	history.pushState(null,'window对象',"./window对象.html");
下面这个代码是可以监听到前进倒退按钮的状态
	window.addEventListener("popstate",function(){
       console.log(1);
   })

六、replaceState()----修改当前的历史记录

replaceState()是用来修改当前的历史记录(history实体)，而不是创建一个新的历史记录，所以，当执行完history.replaceState()后，点击返回按钮照样会返回上一个一面。当需要更新一个state对象或者当前history实体时，可以用replaceState()来实现。
	history.replaceState(null,null,"./window对象.html");

七、禁止主界面系统回退

	<body>
	登录界面
	<a href="./admin.html">登录</a>
	<script>
	    history.replaceState(null,null,'./admin.html');
	</script>
	</body>

admin.html

	<body>
		主系统界面
	</body>

在这里插入图片描述

八、标签实现前进倒退

	<body>
	登录界面
		<a href="./admin.html">登录</a>
		<a href="javascript:history.go(-1);">倒退</a>
		<a href="javascript:history.go(1);">前进</a>
	</body>

admin.html

	<body>
		主系统界面
	</body>

禁止a点击跳转
href=“javascript:void(0)”

南初️

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
7
评论
bom操作----history对象

目录一、后退---back()二、前进---forward()三、go()四、pushState()----创建一条历史记录五、replaceState()----修改当前的历史记录六、禁止主界面系统回退七、标签实现前进倒退一、后退—back()移动到上一个访问页面，等同于浏览器的后退键。 history.back();//后退二、前进—forward()移动到下一个访问页面，等同于浏览器的前进键。 history.forward();//前进<butt.
复制链接

扫一扫