BOM对象
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）框架都必须通过服务器或客户端的某些配置解决这个问 题。
