Javascript中History对象和Location对象

最新推荐文章于 2022-11-30 10:20:40 发布

原创最新推荐文章于 2022-11-30 10:20:40 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

本文介绍了如何使用window.location对象进行页面导航，包括获取当前页面URL、重定向到新页面及更新浏览器地址栏的方法。同时，详细讲解了history对象的使用，如前进、后退和指定跳转等功能。

一、location对象
window. location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

2、包含的属性：
hash、host（含端口号的主机名）、hostname（不含端口号的主机名）、
href（等价于location.toString()方法）、pathname、port、protocol、search

3、方法:

<input type="button" name="" id="btn1" value="assign()" />
		<input type="button" name="" id="btn2" value="reload()" />
		<input type="button" name="" id="btn3" value="replace()" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick=function(){
				location.assign("https://www.baidu.com")
			}
				
			document.getElementById("btn2").onclick=function(){
				location.reload()
			}
			document.getElementById("btn3").onclick=function(){
				location.replace("https://www.baidu.com")
			}

二、history对象

1、go(n)：
在用户的历史记录中任意跳转（这里的历史记录不同于浏览器设置中的历史记录，而
是当前标签页的历史记录），n是一个数字，负数表示后退，正数表示前进，例如在
后台中的返回按钮就很能用上

history.go(-1);
2、back()
加载 history 列表中的前一个 URL。

3、forward()
加载 history 列表中的下一个 URL.

4.方法

<input type="button" name="" id="btn1" value="back()" />
		<input type="button" name="" id="btn2" value="forward()" />
		<input type="button" name="" id="btn4" value="打开01.html" />
		<input type="button" name="" id="btn3" value="go" />
		<script type="text/javascript">
			document.getElementById("btn1").onclick=function(){
				history.back()
			}
			document.getElementById("btn4").onclick=function(){
				history.href="01.html"
			}
			document.getElementById("btn1").onclick=function(){
				history.go("https://www.baidu.com")
			}
		</script>