JavaScript中History对象和Location对象

最新推荐文章于 2023-09-13 18:08:04 发布

煎蛋zai冒泡

最新推荐文章于 2023-09-13 18:08:04 发布

阅读量75

点赞数

文章标签：前端 servlet html

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127060749

版权

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

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

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

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

back（）方法相当于后退按钮；

forward（）方法相当于前进按钮；

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

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

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

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

属性：hostname:设置或检索位置或URL的主机名部分

属性：href:设置或检索完整的URL字符串

方法：assign（“url”）:加载URL指定的新的HTML文档。

方法：reload（）：重新加载当前页。

方法：replace（“url”）:通过加载URL指定的文档来替换当前文档。

代码示例：

第一个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>

第二个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.forward(1)
			}
			document.getElementById("btn4").onclick=function(){
				history.go(-1)//相当于forward功能
			}
		</script>
		
	</body>
</html>

第三个html文件：

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

事件：鼠标事件，键盘事件，其他事件

属性、方法和事件

煎蛋zai冒泡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中History对象和Location对象

go(\"url\"or number) ：加载History列表中的一个URL或要求浏览器移动指定的页面数。方法：replace（“url”）:通过加载URL指定的文档来替换当前文档。方法：assign（“url”）:加载URL指定的新的HTML文档。back() : 加载History列表中的上一个URL.属性：hostname:设置或检索位置或URL的主机名部分。属性：host:设置或检索位置或URL的主机名和端口号。属性：href:设置或检索完整的URL字符串。: 有关当前URL的信息。
复制链接

扫一扫