BOM的核心——window对象api盘点

window对象

BOM的核心是window，它表示浏览器的实例。它是浏览器窗口的javascript接口，不仅是浏览器，也表示ECMAScript中的Gloabl对象。这就意味着，我们开发网页中所有的变量，函数，对象等都是以window作为Gloabol对象，以此来访问全局的各种api方法和属性。也可以以此来访问浏览器暴露给我们的各种信息。

下面我们分类总结下，window下常用的api们。

一些散装api

窗口关系

window.top 最上层窗口（浏览器本身）
window.self 始终指向window对象自己
window.parent 指向当前窗口的父窗口

窗口位置与像素比

window.moveTo(x,y);//移动到（x，y）位置，x,y为绝对坐标
window.moveBy(0,100); //窗口向下移动100px,参数为当前的相对位置
window.devicePixelRatio; //像素比，手机屏幕的物理像素和css像素的比。

窗口大小

window.innerWidth; //页面视口的宽度（不包含浏览器边框和工具栏）
window.innerHeight; //页面视口的高度（不包含浏览器边框和工具栏）
window.outerWidth; //浏览器自身宽度（包含浏览器边框和工具栏）
window.outerHeight; //浏览器自身高度
window.resizeTo(100,100); //缩放到多少
window.resizeBy(100,100); //在自身基础上缩放多少

注意

window.innerWidth，window.innerHeight IE 8 及更早 IE版本不支持这两个属性，附赠以下兼容写法：可以获取页面视口的大小

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;

   }
}

这里，先将 pageWidth 和 pageHeight 的值分别设置为 window.innerWidth 和 window.innerHeight。

然后，检查 pageWidth 是不是一个数值，如果不是则通过 document.compatMode来检查页面是否处于标准模式。

如果是，则使用 document.documentElement.clientWidth document.documentElement.clientHeight；

否则，就使用 document.body.clientWidth 和document.body.clientHeight。

视口位置

window.scroll(0, 100); // 相对于当前视口向右滚动 40 像素
window.scrollBy(0, 100); // 相对于当前视口向右滚动 40 像素(与window.scroll相同)
window.scrollTo({ // 滚动到距离屏幕左边及顶边各 100 像素的位置(scroll,scrollBy也可以用此写法) left: 100, top: 100, behavior: 'smooth' //smooth平滑滚动，auto自动 });

导航与打开新窗口

window.open() 四个参数

要加载的Url
目标窗口名,打开已有的窗口名，如果浏览器已经打开了该窗口名的窗口，就会直接打开并加在url，如果没有则打开新窗口。
特性字符串,打开新窗口的浏览器信息设置（"width=xx,height=xx,left=xx,top=xx"）
新窗口在浏览器历史记录中是都代替当前加载页（true/false）

安全限制：注意不同浏览器，特别移动端对打开窗口的屏蔽问题，和部分参数的安全限制问题。详见MDN：Window.open()

系统对话框

所有提示框样式由浏览器决定，无法更改

alert() 警告框，只有确认按钮
confirm() 确认框，有确定，取消按钮
prompt() 提示框，有确认，取消按钮，和一个输入框
window.print() 显示打印对话框
window.find() 显示查找对话框（ctrl+F）

location对象

提供了当前窗口加在文档的信息，以及通常的导航功能。window.location和document.location是指向同一个对象。location对象还保存着把URL解析为离散片段，并能通过属性访问到这些信息。

假设浏览器当前加载的 URL 是

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location 对象的内容如下表所示。

| 属性 | 值 | 说明 | | --- | --- | | --- | | location.hash | "#contents" | URL 散列值（井号后跟零或多个字符），如果没有则为空字符串 | | location.host | "www.wrox.com:80" | 服务器名及端口号 | | location.hostname | "www.wrox.com" | 服务器名 | | location.href | "www.wrox.com:80/WileyCDA/?q…" | 当前加载页面的完整 URL。location 的 toString()方法返回这个值| | location.pathname | "/WileyCDA/" | URL 中的路径和（或）文件名 | | location.port | "80" | 请求的端口。如果 URL中没有端口，则返回空字符串 | | location.protocol | "http:" |页面使用的协议。通常是"http:"或"https:"| | location.search | "?q=javascript" | URL 的查询字符串(传递的参数)。这个字符串以问号开头 | | location.username | "foouser" | 域名前指定的用户名 | | location.password | "barpassword" | 域名前指定的密码| | location.origin | "www.wrox.com" | URL 的源地址。只读 |

navigator对象

此对象包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息；
JavaScript高级程序设计（第四版）一书中对navigator对象的属性/方法多达四十个左右，这里列举一些常用api。 | 属性 | 说明 | | --- | | --- | |plugin |浏览器安装的插件数组 |appCodeName |通常都是Mozilla，即使在非Mozilla浏览器中也是如此 |appName |浏览器全名 |appVersion |浏览器版本。通常与实际的浏览器版本不一致 |cookieEnabled| 返回布尔值，表示是否启用了cookie |deviceMemory |返回单位为GB的设备内存容量 |mediaDevices |返回可用的媒体设备 |hardWareConcurrency |返回设备的处理器核心数量 |javaEnable |返回布尔值，表示浏览器是否启用了Java |language |返回浏览器的主语言 |languages |返回浏览器偏好的语言数组 |online |返回布尔值，表示浏览器是否联网 |userAgent |返回浏览器的用户代理字符串 |vendor |返回浏览器的厂商名称

screen对象

widnow.screen对象保存的是客户端的显示信息，一般是像素宽高等。每个浏览器都会在scrren上暴露不同的属性，如下举例：

| 属性 | 说明 | | --- | | --- | |availHeight| 屏幕像素高度减去系统组件高度（只读） |availLeft|没有被系统组件占用的屏幕的最左侧像素（只读） |availTop|没有被系统组件占用的屏幕的最顶端像素（只读） |availWidth|屏幕像素宽度减去系统组件宽度（只读） |colorDepth表|示屏幕颜色的位数；多数系统是 32（只读） |height|屏幕像素高度 |left|当前屏幕左边的像素距离 |pixelDepth|屏幕的位深（只读） |top|当前屏幕顶端的像素距离 |width|屏幕像素宽度 |orientation|返回 Screen Orientation API 中屏幕的朝向

history 对象

history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象。出于安全考虑，这个对象不会暴露用户访问过的 URL，但可以通过它在不知道实际 URL 的情况下前进和后退。

history.go(); //方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。
history.back();// 后退一页
history.forward();// 前进一页