BOM

浏览器对象模型 Browser Object Model

window 对象

视口大小，视口位置

视口位置

1
2
3
4
5
6
7
8
9
// 整个窗口的大小
window.outerWidth;
window.outerHeight;
// 视口大小
window.innerWidth;
window.innerHeight;
// 视口中页面大小（不包含auto的滚动条）
document.documentElement.clientWidth;
document.documentElement.clientHeight;

滚动视口

1
2
3
4
5
6
7
window.scrollTo(x, y);
window.scrollTo({
  left: 0,
  top: 100,
  // behavior属性设置是否平滑滚动
  behavior: "auto", // 'smooth'
});

alert confirm promt

alert() 弹出一个警告框
confirm() 弹出一个确认框，用户选择后返回布尔值
prompt() 弹出一个表单框，返回用户输入的信息

location 对象

location 既是 window 的属性，也是 document 的属性

1
2
3
4
5
6
7
8
9
10
11
12
window.location === document.location; // true

location.hash;
location.host;
location.hostname;
location.href;
location.pathname;
location.search;
location.port;
location.origin;
location.username;
location.password;

查询字符串

URLSearchParams

1
2
3
4
5
6
7
8
9
10
11
// ?lang=zh_cn
let qs = new URLSearchParams(location.search);
qs.toString();
qs.has("lang"); // true
qs.get("lang"); // zh_cn
qs.set("page", "3");
qs.delete("page");

for (let param of qs) {
  console.log(param);
}

操作地址

跳转到新地址

1
2
3
4
5
6
let url = "/user/1";
// 以下三种结果相同
location = url;
location.assign(url);
location.href = url;
// location下面的大多属性都可以直接修改，除location.hash之外，修改其他属性都会导致页面重新加载URL

修改 url 且不加入浏览历史记录

1
location.replace(url);

重载页面

1
2
location.reload(); // 从缓存中加载
location.reload(true); // 从服务器端加载

navigator 对象

navigator 对象用来标注浏览器，通常用于确定浏览器的类型

1
2
3
4
5
6
7
8
// 列举几个常用的
appName; // 浏览器全民
appVersion; // 浏览器版本
cookieEnable; // 是否启用cookie
language; // 浏览器主语言
vibrate(); // 触发设备震动
userAgent; // 浏览器的用户代理字符串
mediaDevice; // 可用媒体设备

screen 对象

用以访问当前显示器的信息

history 对象

history 对象表示当前窗口首次使用以来用户的单行历史记录
出于安全考虑，这个对象不会暴露用户访问过的 url，但是可以通过他在不知道实际 url 的情况下前进和后退

1
如果URL发生变化，则会在历史记录中生成一条新条目，这包括URL的散列值（因此把location.hash设置为一个新的值，会在历史记录中增加一条记录）。这个行为常被单页应用程序框架用来模拟前进和后退。这样做不会因导航而触发页面刷新

历史状态管理—hashchange 事件

1
2
3
4
5
6
7
8
9
// hashchange事件会在页面url的散列变化时被触发，开发者可以在此时进行某些操作。而状态管理API则可以让开发者改变浏览器URL而不刷新页面
// 可以使用history.pushState()方法
// 这个方法接收三个参数，state对象，一个新状态的标题，一个相对url（可选）
// 第二个参数当前并未实现使用，所以可以传一个空字符或者短标题
let stateObject = { foo: "bar" };
history.pushState(stateObject, "title", "baz.html");
// pushState()之后，状态信息就会被推倒历史记录中，浏览器地址栏也会改变，以反映新的相对url
// 除了这些变化，location.href返回的时地址栏的内容，浏览器页不会向服务器发送请求
// 第一个参数应该包含正确初始化页面所需要的信息，为了防止滥用对象大小被控制在500kb到1mb以内

因为 pushState()会创建新的历史记录，所以也会相应的启用后退按钮，此时单机后退按钮就会触发 window 对象上的 popstate 事件
popstate 事件的事件对象有个 state 属性，其中包含了通过 pushState()第一个参数传递的 state 对象

1
2
3
4
5
6
7
8
window.addEventListener("popstate", (event) => {
  let state = event.state;
  if (state) {
    // 第一个页面加载时是null
    processState(state);
  }
});
// 基于这个状态，应该把页面重置为状态对象所表示的状态

可以通过 history.state 来获取当前对象的状态，也可以使用 replaceState()并传入 pushState()相同的前两个参数来更新状态，更新状态不会创建新的历史记录，只会覆盖当前状态：

1
history.replaceState({ newFoo: "newBar" }, "new title");

传给 pushState 和 replaceState()的 state 对象应该只包含可以被序列化的信息，DOM 元素之类并不适合放到状态对象里保存
HTML5 状态管理时，要确保通过 pushState()创建的每个‘假’URL 背后都对应服务器上的一个真实物理 URL。否则点击刷新将会导致 404 问题。所有 SPA 框架都必须通过服务器或客户端的某些配置解决这个问题