BOM History和location

最新推荐文章于 2023-08-18 14:02:33 发布

原创最新推荐文章于 2023-08-18 14:02:33 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文详细介绍了JavaScript中History与Location两个重要对象的功能与使用方法。History对象用于操作浏览器的会话历史，包括前进、后退等功能；Location对象则用于获取和修改当前窗口的URL地址，包括跳转、刷新等操作。

一、History对象

1.什么是History

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

2.history对象的方法

back（）方法会让浏览器加载前一个浏览过的文档。 history.back（）等效于浏览器中的“后退”按钮
forward（）方法会让浏览器加载后一个浏览的文档。history. forward（）等效于浏览器中的“前进”按钮
go（n）方法
history.go(1)代表前进一页，相当于浏览器中的前进按照，等价于forward（）方法
history.go（-1）代表后退一页，相当于浏览器中的后退按钮，等价于back（）方法

3.代码

<!DOCTYPE html>
<html>
<head>
<script>
function goBack()
  {
  window.history.go(-2)
  }
</script>
</head>
<body>

<input type="button" value="Go 2 pages back" onclick="goBack()">

</body>
</html>

二、location对象

1.什么是location

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

2.location对象的属性和方法

属性：location.href
可读可写，设置或返回当前的URL地址。

属性：location.host
可读可写，设置或返回当前 URL 的主机名称和端口号。

属性：location.hostname
可读可写，设置或返回当前 URL 的主机名称。

属性：location.href
可读可写，设置或返回 URL 的锚部分（从 # 号开始的部分）。

属性：location.port
可读可写，设置或返回 URL 的端口号。

属性：location.pathname
可读可写，设置或返回 URL 的路径部分。也就是端口号之后，从/开始。

属性：location.protocol
可读可写，设置或返回 URL 的协议。

属性：location.search
可读可写，设置或返回 URL 的参数部分，从?开始，包含?。

方法：location.assign(url)
加载新的文档，其实就是跳转新的地址。

方法：location.reload(true/false)
刷新当前页面，false与F5刷新一样，true与shift+F5一样。

方法：location.replace(url)
跳转新的地址，且没有历史记录在浏览器，也就是替换当前的文档。

3.代码

//对象中的属性和方法
//location 对象
console.log(window.location);

//地址栏上#及后面的内容
console.log(window.location.hash);
//主机及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径----相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);

//设置跳转的页面地址
location.href="http://www.3mooc.com";//属性-----
location.assign("http://www.3mooc.com");//方法
location.reload();//重新加载
location.replace("http://www.3mooc.com");//没有历史记录----不能返回原页面