JavaScript第七课

最新推荐文章于 2024-06-16 13:16:08 发布

Ignorant.946

最新推荐文章于 2024-06-16 13:16:08 发布

阅读量235

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_73654870/article/details/127076121

版权

这一课，让我们来了解两个对象。

一 . History对象

Window对象的history属性其实是引用窗口的History对象，当你在互联网上进行网上冲浪的时候，浏览器会自动维护一个最近访问的URL列表，这个列表就是History对象。虽然History对象的length属性可以被访问，但是它不能提供任何有用的东西。

尽管History对象的属性不可以被访问，但是它还是支持三种方法。方法见下表：

History对象支持的三种方法
back()	加载History列表中的上一个URL，相当于前进按钮
forward()	加载History列表中的下一个URL，相当于后退按钮
go(数字或者URL)	加载History列表之中的一个URL，或者要求浏览器指定的页面数。当它的参数为1时，它代表前进一页，和back一样。当它的参数为-1时，它代表后退一页而它的参数为其他正数或者负数时，代表前进或者后退多少页

接下来让我们来看看它们的具体用法，我们以按钮举例：

back():

<input type="button" name="" id="btn1" value="back()" />
<script type="text/javascript">
    document.getElementById("btn1").onclick = function(){
				history.back();
			}
</script>

forward()：

<input type="button" name="" id="btn3" value="forward()" />
<script type="text/javascript">
    document.getElementById("btn3").onclick = function(){
				history.forward()
			}
</script>

go()：

<input type="button" name="" id="btn4" value="go()" />
<script type="text/javascript">
    document.getElementById("btn4").onclick = function(){
				history.go(1)
			}
</script>

二 . Location对象

Windw的lcation属性引用的是文档的Locaton 对象，它代表该窗口中当前显示的文档的URL。Location 对象的属性见下表：

Location对象的属性
属性名称	说明
host	设置或检索位置或URL的主机名和端口号
hostname	设置或检索位置或URL的主机名部分
href	设置或检索完整的URL字符串
protocol	使用的协议，常见的是 htp. ftp. file、 maito javascript
search	URL中间号之后的部分，通常是某种类型的查询字符串
hash	以字符"#"开始指向一个位于文档中的anchor，使浏览器打一个全新的URL

一般这里面用的比较多的是前三个属性。直接对象名.属性名就可以访问。

讲完了属性，我们还有方法：

Location对象的方法
方法名称	说明
assign（"url"）	加载URL指定的新的HTML文档。有后退功能，可以返回
reload（）	重新加载当页面
replace（"url"）	通过加载URL指定的文档来替换当前文档。是替换当前页面，无法后退

接下来我们可以看看用法：

<body>
		<input type="button" name="" id="btn" value="assign()" />
		<input type="button" name="" id="btn2" value="reload()" />
		<input type="button" name="" id="btn3" value="replace()" />
		<script type="text/javascript">
			console.log(location.host);
			console.log(location.hostname);
			console.log(location.href);// 这里有一个注意点：当你的URL路径中包含中文时，中文部分会自动转换为乱码
			// location的方法
			document.getElementById("btn").onclick = function  () {
				location.assign("http://www.baidu.com")
			}
			document.getElementById("btn2").onclick = function  () {
				location.reload()
			}
			document.getElementById("btn3").onclick = function  () {
				location.replace("http://weibo.com")
			}
		</script>
	</body>