【笔记】JS的浏览器API的BOM学习笔记

发表于 更新于 阅读次数：

前言

浏览器对象模型(BOM)指的是由Web浏览器暴露的所有对象组成的表示模型。BOM与DOM不同，其既没有标准的实现，也没有严格的定义, 所以浏览器厂商可以自由地实现BOM。（维基百科）

window对象

  • 浏览器中默认的全局对象是window对象
  • ECMAScript定义所有JS运行时的全局对象应为globalThis对象，所以浏览器不但由window对象还有globalThis对象，且两者完全相等

window对象的属性

获取窗口在屏幕的位置

  • 窗口左上角距离屏幕左上角的距离
1
2
window.screenX;
window.screenY;

window对象的方法

打开新的标签页

在当前页
1
window.open("<url>");
1
window.open("<url>", "_self");
在新的标签页
1
window.open("<url>", "_blank");

关闭当前标签页

  • 当前标签页只有是通过open()函数打开的，才能通过close()函数关闭
1
window.close();

window对象的事件

窗口焦点事件

获取焦点
1
window.addEventListener("focus", function () {});
失去焦点
1
window.addEventListener("blur", function () {});

HTML元素加载完成

仅包含HTML元素
1
window.addEventListener("DOMContentLoaded", function () {});
包含HTML元素和属性
1
window.addEventListener("load", function () {});

窗口尺寸发生改变

1
window.addEventListener("resize", function () {});

hash哈希值发生改变

  • 在URL中，#后面的内容表示hash值
1
window.addEventListener("hashchange", function () {});
  • 浏览器会根据hash值的内容自动移动到锚点位置
request
1
GET http://127.0.0.1/#name
1
<div id="name"></div>

可见性发生改变

1
2
3
4
window.addEventListener("visibilitychange", function () {
  if (document.visibilityState === "visible") {}
  if (document.visibilityState === "hidden") {}
});

挂在window对象上的其他对象

location对象

location对象的属性

获取完整URL
1
location.href;
1
http://127.0.0.1/index.html?key=value1&key=value2#fragment
获取协议
1
location.protocol;
1
http:
获取主机地址和端口号
1
location.host;
1
127.0.0.1:80
仅获取主机地址
1
location.hostname;
1
127.0.0.1
仅获取端口号
1
location.port;
1
80
获取路径
1
location.pathname;
1
/index.html
获取查询字符串
  • 获取请求参数的query部分
1
location.search;
1
?key=value1&key=value2
获取hash哈希值
1
location.hash;
1
#fragment

location对象的方法

打开一个新的URL
  • history会产生历史记录
1
location.assign("<url>");
替换一个新的URL
  • history不会产生历史记录
1
location.replace("<url>");
重新加载当前URL
允许使用缓存
1
location.reload();
1
location.reload(false);
强制重载禁用缓存
1
location.reload(true);

history对象

history对象的属性

历史记录数量
1
history.length;
历史记录状态
1
history.state;

history对象的方法

打开一个新的URL
  • history会产生历史记录

<state>：传入一个对象作为状态
<title>：通常设置为空字符串，因为大部分浏览器不进行解析，属于预留字段
<url>：设置跳转的资源路径，以/开头

1
history.pushState(<state>, <title>, <url>);
替换一个新的URL
  • history不会产生历史记录
1
history.replaceState(<state>, <title>, <url>);
前进
1
history.forward();
后退
1
history.back();
跳转指定次

<num>：正数为向前跳转，负数为向后跳转

1
history.go(<num>);

事件

前进或后退事件
1
window.addEventListener("popstate", function () {});
获取触摸屏最大触摸点数
1
navigator.maxTouchPoints;
获取浏览器当前是否联网
1
navigator.onLine;
获取操作系统和CPU
1
navigator.oscpu;
获取浏览器运行的系统平台
1
navigator.platform;
获取用户代理
1
navigator.userAgent;
获取浏览器的厂商名称
1
navigator.vendor;
获取浏览器的厂商详细信息
1
navigator.vendorSub;
获取浏览器当前是否被自动化程序控制
1
navigator.webdriver;
触发设备震动
震动一次并指定时长

100：震动100毫秒

1
navigator.vibrate(100);
震动多次并交替震动和暂停

[100, 200, 100]：震动100毫秒，暂停200毫秒，再震动100毫秒

1
navigator.vibrate([100, 200, 100]);
停止震动
1
navigator.vibrate(0);

screen对象

screen对象的属性

获取屏幕尺寸
1
2
screen.width;
screen.height;
获取屏幕位置
  • 获取窗口左上角距离屏幕左上角的距离
1
2
screen.top;
screen.left;

完成