JavaScript——Location对象与History对象

最新推荐文章于 2022-09-27 22:47:46 发布

小王不是程序员

最新推荐文章于 2022-09-27 22:47:46 发布

阅读量524

点赞数

分类专栏： JavaScript基础文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/WXS153322/article/details/127063920

版权

JavaScript基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Location对象

window的location属性和引用的是文档的Location对下个，它代表改窗口中当前显示的文档的URL

Location对象的属性
属性名称	说明
host	设置或检索位置或URL的主机名和端口号
hostname	设置或检索位置或URL的主机名部分
href	设置或检索完整的URL字符串
protocol	使用的协议，常见的是http、ftp、file、mailto、JavaScript
search	URL中间号之后的部分，通常是某种类型的查询字符串
hash	以字符串“#”开始指向一个位于文档中的anchor，是浏览器打开一个新的URL

Location对象的方法
方法名称	说明
assign("url")	加载URL指定的新的HTML文档
reload()	重新加载当前页
replace("url")	通过记载URL指定的文档来替换当前文档

assign()方法：

实现按钮跳转到百度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function btnt() {
				// 跳转到百度网址
				location.assign("http://www.baidu.com")
			}
		</script>
		<!-- 设置一个按钮添加点击事件 -->
		<input type="button" value="点击跳转百度" onclick="btnt()">
	</body>
</html>

效果如下：

reload()方法

实现页面的刷新功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function btnt() {
				// 刷新
				location.reload()
			}
		</script>
		<!-- 设置一个按钮添加点击事件 -->
		<input type="button" value="刷新" onclick="btnt()">
	</body>
</html>

演示如下：

replace()方法

用百度页面代替当前页面，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function btnt() {
				// 百度页面代替此页面
				location.replace("http://www.baidu.com")
			}
		</script>
		<!-- 设置一个按钮添加点击事件 -->
		<input type="button" value="百度页面" onclick="btnt()">
	</body>
</html>

效果如下：

要注意的是replase方法是用其他的页面来代替当前页面，所以代替的页面没有记录

History对象

有关于客户访问过的URL的信息。

方法如下：

名称	说明
back()	记载一个History列表中的上一个URL
forward()	加载History列表中的下一个URL
go()	加载History列表中的一个URL或要求浏览器移动指定的页面数

现在我们就用back方法来实现两个页面的的相互跳转

首先要是设置第一个页面的跳转至第二个页面的设置如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function btnt() {
				// 跳转第二个页面
				location.assign("index2.html")
			}
		</script>
		<!-- 设置一个按钮添加点击事件 -->
		<input type="button" value="跳转第二个页面" onclick="btnt()">
	</body>
</html>

然后我们在第二个页面中用back方法回到上个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function bak() {
				//返回上一个页面
				history.back()
			}
		</script>
		<input type="button" value="返回上一个页面" onclick="bak()">
	</body>
</html>

然后我们打开第一个代码运行看效果：

再次基础上我们可以在第一个页面中加入forward()方法可以加载历史中的下一个页面

从以上结果我们可以看出第一次点击跳转下一个页面的时候是不会跳转第二个页面的，但是我们先从写好的跳转到第二个页面中，然后在回到第一个页面中，这时再去跳转下一个页面，才会跳转成功。

结论：History对象是在使用过程中出现跳转等操作，History对象会记录下来用户的历史使用记录，而History对象方法是在用户的历史记录里进行的一系列操作

再来看一下go()方法

我们在以上案例基础上创建第三个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script>
				
				
			function tc(){
                //返回前两次记录
				history.go(-2)
			}
		</script>
		<input type="button" value="返回到前两次记录" onclick="tc()">
	</body>
</html>

演示结果：