BOM对象

1.window对象

1.1 窗口大小

innerWidth、innerHeight：页面视口大小（包含滚动条）
outerWidth、outerHeight：浏览器自身大小

document.documentElement.clientWidth
document.documentElement.clientHeight：页面视口（document）的宽高（不包含border）

document.documentElement.offsetWidth
document.documentElement.offsetHeight：包含边框

let pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
	if (document.compatMode == "CSS1Compat"){
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
} 	else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}

1.2 视口位置

window.pageXoffset/window.scrollX
和
window.pageYoffset/window.scrollY

// 相对于当前视口向右滚动40像素
window.scrollBy(40, 0);
// 滚动到页面左上角
window.scrollTo(0, 0);

//这几个方法也都接收一个ScrollToOptions字典，除了提供偏移值，
//还可以通过behavior属性告诉浏览器是否平滑滚动。 auto正常，smooth平滑
window.scrollTO({
    left: 100,
    top: 100,
    behavior: 'smooth'
});

1.3 打开新窗口

window.open()可以导航与打开新窗口，这个方法接收4个参数：要加载的URL、目标窗口、 特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页 面的布尔值。

//<iframe src="" name="iframe_a" width="400px" height="300px"></iframe>

// 与<a href="http://www.wrox.com" target="iframe_a"/>相同
window.open("http://www.wrox.com/", "iframe_a");

会在窗格中打开URL，如果没有此窗格则会打开新窗口，这个参数也可以是 _self、 _parent、_top或_blank。

• 第三个参数，特性字符串只在弹出新窗口时适用，width、toolar（是否显示工具类）、status（状态栏）、
  scrollbars（滚动）、resizable（调整大小）、Menubar（菜单栏）、location（地址栏）

  window.open("http://www.wrox.com/",
  "wroxWindow",
  "height=400,width=400,top=10,left=10,resizable=yes");
  

  
  

• window.open()方法返回一个对新建窗口的引用，以方便控制和传递信息

  新窗口可以使用top.close() 关闭自己，还有一个opener属性指向打开它的窗口

1.4 定时器

setTimeout()用于指定在一定时间后执行某些代码，而setInterval()用于指 定每隔一段时间执行某些代码。

setTimeout()方法通常接收两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。第一个参数可以是包含JavaScript代码的字符串（类似于传给eval()的字符串）或者一个函数。第二个参数是要等待的毫秒数，而不是要执行代码的确切时间。

JavaScript是单线程的，所以每次只能执行一段代码。为了调度不同代码的执行，JavaScript维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行。setTimeout()的第二个参数只是告诉JavaScript引擎在指定的毫秒数过后把任务添加到这个队列。 如果队列是空的，则会立即执行该代码。如果队列不是空的，则代码必须等待前面的任务执行完才能执行。

// 设置超时任务
let timeoutId = setTimeout(() => alert("Hello world!"), 1000);
// 取消超时任务
clearTimeout(timeoutId);

所有超时执行的代码（函数）都会在全局作用域中的一个匿名函数中运行，因此函数中的this值在非严格模式下始终指向window，而在严格模式下是undefined。如果给setTimeout()提供了一个箭头函数，那么this会保留为定义它时所在的词汇作用域。

1.5 对话框

alert()、confirm()、prompt()、print() 打印功能

alert() 为警告框

confirm() 确认框 有两个”确定‘和“取消“按钮

// 可以通过返回值判断用户的点击
if (confirm("Are you sure?")) {
	alert("I'm so glad you're sure!");
} else {
	alert("I'm sorry to hear you're not sure.");
}

prompt() 提示框 可以让用户输入信息

//了OK按钮，则prompt()会返回文本框中的值。如果
//用户单击了Cancel按钮，或者对话框被关闭，则prompt()会返回 null
let result = prompt("What is your name? ", "");
if (result !== null) {
	alert("Welcome, " + result);
}

2.location对象

window.location和document.location指向一个对象

假设当前URL为http://foouser:barpassword@www.wrox.com/WileyCDA/?q=javascript#contents

hash、host、href、pathName、port、protocol、origin

2.1 操作地址

//下面三个方法相同会更改地址（刷新）
location.assign("http://www.example.com");
window.location = "http://www.example.com";
location.href = "http://www.example.com";

更改除了hash的属性都会让页面刷新

还可以使用replace()方法不会产生历史记录（无回退按钮）

reload() 刷新：

location.reload(); // 重新加载，可能是从缓存加载
location.reload(true); // 重新加载，从服务器加载

3. navigator对象

本章略

4. screen对象

availWidth、availHeight 当前屏幕最大可用宽高

width、height屏幕宽高

5. history对象

// 后退一页
history.go(-1);
// 前进两页
history.go(2);

// 后退一页
history.back();
// 前进一页
history.forward();

history对象还有一个length属性，表示历史记录中有多个条目。

5.1 历史状态管理（单页面）

用户 每次点击都会触发页面刷新的时代早已过去，为解决这个问题

最开始时开发者利用更改hash不刷新的特性配合hashchange事件，实现伪刷新。而history的状态管理可以修改URL而不刷新页面。

history.pushState()方法。
这个方法接收3个参数：一个state对象、一个新状态的标题和一个（可选的）相对URL。

let stateObject = {foo:"bar"};
history.pushState(stateObject, "My title", "baz.html");

pushState()方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相对URL。

第一个参数应该包含正确初始化页面状态所必需的信息。通常在500KB～1MB以内。
第二个参数并未被当前实现所使用，因此既可以传一个空字符串也可以传一个短标题。

在点击前进和后退按钮时会触发popstate事件，该事件的事件对象有一个state属性->之前设置的初始化对象。

window.addEventListener("popstate", (event) => {
	let state = event.state;
	if (state) { // 第一个页面加载时状态是null
		processState(state);
	}
});

history.state获取当前页面的状态对象
还可以使用replaceState()并传入与pushState()同样的前两个参数来更 新状态。

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

传给pushState()和replaceState()的state对象应该只包含可以被序列化的信息。因此，DOM元素之类并不适合放到状态对象里保存。

使用HTML5状态管理时，要确保通过pushState()创建的每个“假”URL背后都对应着服务器上一个真实的物理URL。否则，单击“刷新”按钮会导致404错误。所有单页应用程序（SPA，Single Page Application）框架都必须通过服务器或客户端的某些配置解决这个问 题。