JavaScript文档对象模型--History对象，Location对象，Window对象。

最新推荐文章于 2024-07-23 11:32:13 发布

羊咩咩的小脑袋~

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量250

点赞数 1

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/weixin_69036336/article/details/127059840

版权

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

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

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

/go(1)代表前进1页，等价于forward()方法；

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

<!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="打开index3.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="index3.html"
			}
			document.getElementById("btn3").onclick=function(){
				history.forward()
			}
			document.getElementById("btn4").onclick=function(){
				history.go(1)
			}
		</script>
	</body>
</html>

二，Location对象:有关当前URL的信息。

/assign:加载URL指定的新的HTML文档。

/reload:重新加载当前页。

/repiace:通过加载URL指定的文档来替换当前文档。

<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>

三， Window对象。

/onLoad():对象装载完成后触发。

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

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

<input type="button" id="btn1" value="按钮1" onclick="test()">
		<input type="button" id="btn2" value="按钮2" />
		<script type="text/javascript">
			function test(){
				alert("aa")
			}
			document.getElementById("btn2").onclick=function(){
				alert("zz")
			}
			window.onload=function(){
				console.log("vv")
			}
		</script>