网页导航与交互-CSDN博客

本文链接：https://blog.csdn.net/qq_73686203/article/details/127061106

本文介绍了JavaScript中History对象和Location对象的使用方法，包括如何利用这些对象实现页面的前进、后退及重新加载等功能，并详细解释了相关属性和方法的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.History对象:有关客户访问过的URL的对象

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

back()方法相当于后退按钮；forward()方法相当于前进按钮

go(1)代表前进1页，等价于forward()方法；fo(-1)代表后退1页，等价于back()方法

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="a" value="打开02.html" />
		<script type="text/javascript">
			a.onclick=function(){
				location.href="02.html"
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="b1" value="back" />
		<input type="button" id="b2" value="打开03.html" />
		<input type="button" id="b3" value="forward()" />
		<input type="button" id="b4" value="go" />
		<script type="text/javascript">
			b1.onclick=function(){
				history.back()//返回上一页
			}
			b2.onclick=function(){
				location.herf="03.html"
			}
			b3.onclick=function(){
				history.forward()//跳转到history列表中的下一个页面
			}
			b4.onclick=function(){
				history.go(1)//相当于forward()
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="b1" value="返回02.html" />
		<input type="button" id="b2" value="go" />
		<script type="text/javascript">
			b1.onclick=function(){
				location.herf="02.html"
			}
			b2.onclick=function(){
				history.go()
			}
		</script>
	</body>
</html>

2.Location对象:有关当前URl的信息

属性	说明
fhost	设置或检索位置或URL的主机名和端口号
hostname	设置或检索位置或URL的主机名部分
href	设置或检索完整的URL字符串

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

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="btn1" id="btn1" value="assign()" />
		<input type="button" name="btn2" id="btn1" value="reload()" />
		<input type="button" name="btn1" id="btn1" value="replace()" />
		<script type="text/javascript">
			console.log(location.host)
			console.log(location.hostname)
			console.log(location.href)
			btn1.onclick()=function(){
				location.assign("http:www.baidu.com")//可以后退
			}
			btn2.onclick()=function(){
				location.reload()//页面刷新
			}
			btn3.onclick=function(){
				location.replace("http:www.baidu.com")//没有后退功能
			}
		</script>
	</body>
</html>

3.属性、方法和事件

属性：属性是指对象包含的值，使用'对象名.属性名'的方式进行操作，如document.myform.first.value

方法：在代码里，使用‘对象名.方法名’来调用该对象的方法

alter('')=Windows.alter('')

事件：响应用户操作、完成交互，如OnClick、OnKeyDown

一般可以分为鼠标事件、键盘事件及其他事件

鼠标事件	意义
onmousedown	按下鼠标键
onmousemove	移动鼠标
onmouseout	鼠标离开某一个网页对象
onmouseup	鼠标移动到某一个网页对象上
onmouseup	松开鼠标
onclick	单击鼠标键
ondblclick	双击鼠标键