JS之BOM编程History和location对象

History对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

History对象属性及描述

length 返回浏览器历史列表中的 URL 数量。

History对象方法及描述
  • back():
    加载history列表中的前一个 URL。
  • forward():
    加载history列表中的下一个 URL。
  • go():
    加载history列表中的某个具体页面。
History对象描述

History对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

代码示例

test.html:

<body>
	<a href="index.html">跳转到index页面</a>
</body>

index.html:

<body>
	这是index页面
	<input type="button" value="后退" 
		onclick="window.history.back()" />
	<input type="button" value="后退" 
		onclick="window.history.go(-1)" />
</body>

在这里插入图片描述
点击链接:
在这里插入图片描述
点击后退会再次回到test页面。

location对象

1、Location对象包含有关当前 URL 的信息。
2、Location对象是Window对象的一个部分,可通过window.location属性来访问。
3、例子:把用户带到一个新的地址

Location对象属性及描述

hash:设置或返回从井号 (#) 开始的 URL(锚)。
host:设置或返回主机名和当前 URL 的端口号。
hostname:设置或返回当前 URL 的主机名。
href:设置或返回完整的 URL。
pathname:设置或返回当前 URL 的路径部分。
port:设置或返回当前 URL 的端口号。
protocol:设置或返回当前 URL 的协议。
search:设置或返回从问号 (?) 开始的 URL(查询部分)。

Location对象方法及描述

assign():加载新的文档。
reload():重新加载当前文档。
replace():用新的文档替换当前文档。

代码示例
<body>
	<script>
		function goBaiDu(){
			//获取location对象
			var locationObj =  window.location;
			locationObj.href = "http://www.baidu.com";
			//使用下面的方式也可以
			//document.location.href = "http://www.baidu.com";
		}
	</script>
	<input type="button"  value="去百度" onclick="goBaiDu()" />
</body>

在这里插入图片描述
点击按钮跳转到百度首页。

posted @ 2020-09-12 17:51  YU_UY  阅读(177)  评论(0编辑  收藏  举报