BOM一、window对象 1.1、Global作用域和窗口 window是ECMAScript中的Global对象，也

一、window对象

1.1、Global作用域和窗口

window是ECMAScript中的Global对象，也是浏览器窗口的javascript接口。所有通过var声明的全局变量和函数都是window对象的属性和方法。let和const则不会。

窗口：window.top 、window.parent、window.parent.parent 串联起来各个window。

       console.log(window.top);
       console.log(window.parent);
       console.log(window.parent.parent);
       console.log(window.parent===window.top); // true
       console.log(window.parent.parent===window.top); // true

CSS像素：不是物理像素，CSS像素是相对单位，通常被映射到屏幕上的物理像素，在普通的电脑屏幕上，通常认为1个CSS像素对应1个物理像素，但在高分辨率（例如Retina显示屏）或低分辨率的设备上，1个CSS像素可能对应多个物理像素。

窗口的宽高：

window.innerWidth：返回浏览器窗口的内部宽度，即浏览器视口（viewport）的宽度，包括滚动条的宽度（如果有）。
window.innerHeight：返回浏览器窗口的内部高度，即浏览器视口（viewport）的高度，不包括滚动条的高度。
window.outerWidth：返回浏览器窗口的外部宽度，即整个浏览器窗口的宽度，包括边框和工具栏等。
window.outerHeight：返回浏览器窗口的外部高度，即整个浏览器窗口的高度，包括边框和工具栏等。
document.documentElement.clientWidth：返回文档的根元素（通常是 <html> 元素）的可视区域宽度，不包括滚动条的宽度。
document.documentElement.clientHeight：返回文档的根元素（通常是 <html> 元素）的可视区域高度，不包括滚动条的高度。
document.body.clientWidth：返回 <body> 元素的可视区域宽度，不包括滚动条的宽度。
document.body.clientHeight：返回 <body> 元素的可视区域高度，不包括滚动条的高度。

窗口的滚动：

    window.scrollTo({
      top: document.body.scrollHeight, // 滚动到页面底部
      behavior: 'smooth' // 平滑滚动
    });

窗口的打开open、关闭close、移动move、缩放resizeTo/resizeBy:

    let windowNew =  window.open("http://www.baidu.com","第一个网页","width=400");
    windowNew.opener = null;// 表示新打开的标签页不需要与打开它的标签页通信

window.opener指向打开它的窗口。

弹窗屏蔽程序：检测弹窗是否打开的例子

let blocked = false;
try {
    let windowNew = window.open("http://www.baidu.com", "第一个网页", "width=400");
    if (windowNew == null) {
        blocked = true;
    }
} catch (ex) {
    blocked = true;
}
console.log(blocked);

1.2 定时器

let timeId = setTimeout(() => console.log("time come", 1000));
clearTimeout(timeId);
let intervalId = setInterval(() => {
    console.log("time interval");
}, 1000);
clearInterval(intervalId);

1.3 系统对话框

alert：警告框，只有一个按钮。

confirm：确认框，是两个按钮。

prompt：提示框，提示用户输入消息。

print：对话框异步显示打印。

find：对话框异步显示查找。

1.4 location对象

location.search 查询的字符串，以?开头的，有对应的api：URLSearchParams;

decodeURIComponent("%XXX")解码字符串。

导航新的页面，并新增历史记录可以使用：

window.location.assign("http://www.baidu.com");
window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

如果不希望新增记录可以使用location.replace，此时后退按钮是禁用状态。

重新加载当前显示的页面：可以使用location.reload，建议把这个方法作为最后一行代码，因为调用之后，代码可能执行也可能不执行，取决于网络延迟和系统资源的因素。

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

1.5 navigator对象

其对象属性通常用于确定浏览器的类型，比如userAgent等

window.navigator.plugins:返回浏览器安装的插件数组。

但是旧版本IE的检测则依赖ActiveXObject.

    let hasPlugin = function (name) {
        name = name.toLowerCase();
        for (let plugin of window.navigator.plugins) {
            if (plugin.name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }

    let hasIEPlugin = function (name) {
        try {
            new ActiveXObject(name);
            return true;
        } catch (ex) {
            return false;
        }
    }
    console.log(hasPlugin("pDf"));

注册处理程序：将某个web应用程序注册为默认邮件客户端。

 navigator.registerProtocolHandler("mailto","http://www.xxclient?cmd=%s","xxclient");

例如，如果用户点击一个 mailto:example@example.com 的链接，浏览器会将该地址传递给注册的协议处理程序，替换 %s，然后访问注册的协议处理程序所指定的 URL，其中包含了实际的邮件地址。

1.5 screen对象

它包含了一些属性，可以用来获取用户屏幕的尺寸、颜色深度等信息。以下是 screen 对象的一些常用属性：

screen.width：返回用户屏幕的宽度，以像素为单位。
screen.height：返回用户屏幕的高度，以像素为单位。
screen.availWidth：返回用户屏幕的可用宽度，以像素为单位。这个值通常减去了任务栏、工具栏等占用的空间。
screen.availHeight：返回用户屏幕的可用高度，以像素为单位。这个值通常减去了任务栏、工具栏等占用的空间。
screen.colorDepth：返回用户屏幕的颜色深度，即每个像素的位数。
screen.pixelDepth：与 screen.colorDepth 类似，返回用户屏幕的像素深度，即每个像素的位数。

1.6 history对象用于前进和后退

  history.go(-1);
  history.go(2);
  history.forward();
  history.back();
  history.go("xxx.com"); // 旧版本浏览器中存在
  history.length==1; //用来判断是不是用户窗口的第一个页面

历史状态管理：

let stateObj = { foo: 'bar' };
history.pushState(stateObj, "title", "baz.html");
history.replaceState({ newFoo: "newBar" }, "title", "bZ.HTML");

二、能力检测

    function getElement(id) {
        if (typeof document.getElementById == "function") {
            return document.getElementById(id);
        } else if (typeof document.all == "function") {
            return document.all[id];
        } else {
            throw new Error("no way to retrieve element");
        }
    }

演示一个检测是否存在获取element的方法。

检测特性：

  let hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
  let hasDom1 = !!(document.getElementById && document.createElement && document.getElementsByTagName);

检测浏览器：

    function detectBrowser() {
        if (window.chrome && window.chrome.webstore) {
            return "Chrome";
        } else if (window.opr && window.opr.addons) {
            return "Opera20";
        } else if (window.StyleMedia) {
            return "Edge20";
        } else if (document.documentMode) {
            return "IE7~11";
        } else if (typeof InstallTrigger !== 'undefined') {
            return "Firefox";
        } else if ((({ pushNotification = {} } = {}) => pushNotification.toString() == '[object SafariRemoteNotification]')(window.safari)) {
            return "Safari7.1";
        } else {
            return "Unknown";
        }
    }

检测浏览器的方法因userAgent容易伪造，所以采用上述方式。

BOM