JavaScript的History对象Location对象

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

QiuBO.

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

阅读量316

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_70648941/article/details/127059843

版权

History

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

location对象：有关当前URL的信息。

属性：host:设置或检索位置或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" 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.assign("http://www.baidu.com")
			}
			document.getElementById("btn3").onclick=function(){
				location.assign("http://www.baidu.com")
			}
		</script>
	</body>
</html>

代码示例：

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

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

QiuBO.

关注

0
点赞
踩
0

收藏

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

back() :加载History列表中的上一个URL.forward():加载History 列表中的下一个URLgo("url"or number)加载History列表中的一个URL或要求浏览器移动指定的页面数back（）方法相当于后退按钮；forward（）方法相当于前进按钮；go(1) 代表前进1页，等价于forward（）方法；go(-1)代表后退1页，等价于back（）方法；
复制链接

扫一扫