复习笔记之API(12)
2020-04-20 本文已影响0人
晚月川
BOM浏览器对象模型
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象
URL
URL:统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，他包含的信息指出文件的位置以及浏览器应该怎么处理它。
语法格式：
protocol://host[:port]/path/[?query]#fragment
- 例如：
http://www.baidu.com/index.html?name=andy&age=18#link
URL组成说明
| 组成 | 说明 |
|---|---|
protocol |
通信协议 常用的http、ftp、maito等 |
host |
主机(域名) www.baidu.com
|
port |
端口号(可选) 省略是使用方案的默认端口 如http的默认端口是80 |
path |
路径 由零到多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
query |
参数 以键值对的形式通过&符号分隔开来 |
fragment |
片段 #后面内容 常见于链接、锚点 |
location对象常用的属性
location对象属性值 |
返回值 |
|---|---|
location.href |
获取或设置整个URL
|
location.host |
返回主机(域名) www.baidu.com
|
location.port |
返回端口号，如果没写返回空字符串 |
location.pathname |
返回路径 |
location.search |
返回参数 |
location.hash |
返回片段 #后面内容 常见于链接、锚点 |
location对象常用的方法
location对象方法 |
返回值 |
|---|---|
location.assign() |
跟href一样，可以跳转页面(也称为重定向页面) |
location.replace() |
替换当前页面，因为不记录历史，所以不能后退页面 |
location.reload() |
重新加载页面，相当于刷新按钮或者F5 如果参数是true 强制刷新ctrl+F5
|
<button>点击跳转</button>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 记录浏览历史，可以实现后退功能
location.assign('http://www.baidu.com');
// 不记录浏览历史，不能实现后退功能
location.replace('http://www.baidu.com');
// 刷新页面 不写或者默认参数为false，刷新页面 参数true强制刷新，相当于ctrl+F5
location.reload();
})
</script>
navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们常用的是userAgent,该属性可以返回由客户端发送到服务器的user-agent头部的值
history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户(在浏览器窗口中)访问过的URL
history对象方法 |
作用 |
|---|---|
back() |
后退功能 |
forward() |
前进功能 |
go(参数) |
前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面 |
history对象一般在实际开发中比较少用，但会在一些OA办公系统中见到
