JavaScript--History对象、Location对象、Document对象、Window对象。

最新推荐文章于 2024-08-25 09:57:22 发布

WXLN.

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量219

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_68758365/article/details/127059385

版权

一、

History对象：有关客户访问过的URL的信息

名称说明

back() 加载History列表中的上一个URL

forword() 加载History列表中的下一个URL

go() 加载History列表中的一个URL或要求浏览器移动指定的页面数

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

forword()方法相当于前进按钮；

go(1)代表前进1页；

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

eg：创建三个HTML页面

页面一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" id="btn" value="打开02.html" />
		<script type="text/javascript">
			document.getElementById("btn").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="btn1" value="back">
		<input type="button" id="btn2" value="打开03.html">
		<input type="button" id="btn3" value="forward()">
		<input type="button" id="btn4" value="go">
		<script type="text/javascript">
			document.getElementById("btn1").onclick=function(){
				history.back()
			}
			
			document.getElementById("btn2").onclick=function(){
				location.href="03.html"
			}
			document.getElementById("btn3").onclick=function(){
				history.forword()
			}
			document.getElementById("btn4").onclick=function(){
				history.go(-1)
			}
		</script>
	</body>
</html>

页面三:

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

二、

Location对象:有关URL的信息

属性说明

host 设置或检索位置或URL的主机名和端口号

hostname 设置或检索位置或URL的主机名部分

href 设置或检索完整的URL字符串

方法说明

assign 加载URL指定的新的HTML文档

reload 重新加载当前页

replace 通过加载URL指定的文档来替换当前文档

eg：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="assign">
		<input type="button" id="btn2" value="reload">
		<input type="button" id="btn3" value="replace">
		<script type="text/javascript">
			console.log(location.host)
			console.log(location.hostname)
			console.log(location.href)
			document.getElementById("btn1").onclick=function(){
				location.assign("http://www.baidu.com")//有后退功能，可以返回
				
			}
			document.getElementById("btn2").onclick=function(){
				location.reload()
				
			}
			document.getElementById("btn3").onclick=function(){
				location.replace("http://www.baidu.com")//是替换当前页面，无法后退
				
			}
			
			
		</script>
		
	</body>
</html>

三、

Document对象

每个载入浏览器的HTML文档都会成为Document对象

事件说明

onload() 对象装载完成后触发

onkeydown 按下一个键

onkeyup 松下一个键

onkeypress 按下然后松开一个键

onunload() 对象被卸载后触发

onmousedown 按下鼠标键

onmousemove 移动鼠标

onmouseout 鼠标离开当前页面

onmouseover 鼠标移动到当前页面

onmouseup 松开鼠标键

onclik 单机鼠标键

ondblclick 双击鼠标键

四、

Window对象常用事件

事件说明

onload() 对象转载完成后触发

onscroll() 窗口的滚动条被拖动时触发

onresize() 窗口的大小改变时触发

onbiur()/onfocus() 窗口失去/获得焦点时触发

onerror() 遇到执行错误时触发

onunload() 对象被卸载后触发

WXLN.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--History对象、Location对象、Document对象、Window对象。

go(-1)代表后退1页，等价于back()方法；forword()方法相当于前进按钮；back()方法相当于后退按钮；go(1)代表前进1页；
复制链接

扫一扫