BOM

JavaScript

window 对象

window对象表示浏览器的实例。在网页中定义的任何一个对象、变量和函数都以 window 对象作为其 Global 对象。

全局作用域

由于 window 对象同时也是 global 对象，全局作用域下声明的变量和函数都会成为 window 对象的变量和方法。但是这之间又有所区别，它作为 window 对象的属性时可以被 delete 操作符删除，而作为 var 声明的全局变量时则不行。

另外，尝试访问未声明的变量会报错但是通过查询 window 对象的属性不会报错。

窗口关系及框架

页面中的每个框架都拥有自己的 window 对象，保存在 frames 集合中。可以通过数值索引（从0开始，从左至右，从上到下）或者框架的 name 特性来访问相应的 window 对象。

parent 对象始终指向当前框架的上层框架。self 始终指向 window 对象。

窗口位置

关于窗口位置 Firefox 使用 screenX 和 screeY 来表示，其他浏览器中同时使用 screenX、screenY、screenLeft 和 screenTop 表示。

• Firefox 下最大化状态四个值都返回 -8
• IE 下最大化状态 screenX 返回 -8，screenLeft 返回0
• 其他浏览器下最大化状态都返回 0

使用 moveTo()方法和 moveBy() 方法可以移动浏览器位置，这两个方法都接受两个参数，x 和 y。

窗口大小

IE9+, Firefox, Chrome, Opera 和 Safari 均提供 innerWieght 和innerHeight 属性来表示浏览器视口大小 outerWieght 和outerHeight 表示浏览器窗口大小。

• 浏览器视口大小是包括滚动条但不包括工具栏的大小
• 浏览器窗口大小是包括浏览器边框的大小。（IE、Edge 和 FireFox 中四边各有 8px 的不可见的边框， Chrome 和 Opera 没有边框。）

对于 IE8及以下在标准模式下要使用 document.document.clientWeight,混杂模式下要使用 document.body.clientWeight
对于各种浏览器的兼容，W3C 给出的解决方法是

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

使用 resizeTo()方法和 resizeBy()方法可以调整浏览器窗口大小，这两个方法都接受两个参数，x 和 y。

导航和打开窗口

window.open()方法可以接受四个参数。
需要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前页面的布尔值。

第二个参数可以是已有窗口名或者是框架名，如果不传入窗口目标就是在当前页打开。如果传入一个当前不存在的窗口或框架名则打开一个新窗口并命名为此。也可以是特殊窗口名称_self、_parent、_top、_blank。

弹出窗口

第三个参数可以设置弹出的新窗口的一系列属性，如果不打开新窗口则会忽略第三个参数。不传入第三个参数，则会打开新的标签页，传入第三个参数（即使是无意义的）则会打开新的窗口，默认的窗口样式是没有工具栏只有导航栏的窗口化窗口（FireFox下为最大化）。
`

window.open("https://www.baidu.com/","_blank","left=0,toolbar=yes")

安全限制

为了防止弹出窗口的滥用，大多浏览器都对弹出窗口进行了诸多的限制。

在 IE 中会屏蔽自动弹窗，在 onclick 触发后到打开窗口前有异步任务完成也会被认为是自动打开的窗口，解决方法是先打开一个空白窗口,异步任务结束之后再为其指定路径。

弹出窗口屏蔽程序

对于弹窗的屏蔽有两种，一种是浏览器内置的弹窗屏蔽，一种是外部程序的弹窗屏蔽功能。

• 浏览器内置的弹窗屏蔽一般都会使 window.open()返回 null，通过检测返回值就知道是否被屏蔽。
• 外部程序的弹窗屏蔽一般都会抛出一个未知错误，因此将其放在 try catch 语句中检测错误就可以知道弹窗是否被屏蔽。

var block = false;
try {
    var wroxWin = window.open("https://www.baidu.com/","_blank");
    if (wroxWin == null) {
        blocked = true;
    }
} catch (ex) {
    blocked = true;
}
if (blocked) {
    alert("The popup was blocked");
}

系统对话框

• alert( )传入提示文本，弹出一个警告框，仅有确定按钮。
• confirm( )传入提示文本，弹出一个确认框，有确定按钮和取消按钮。confirm( )会根据用户的选择返回 ture 或者 false，通常放在 if else 语句的条件中。
• prompt( )传入两个参数，弹出一个提示框，有确定按钮、取消按钮和输入框。第一个参数是提示文本，第二个参数是输入框的默认值。用户点击确定则返回输入框中的文本，点击返回或关闭提示框则返回 null。
• 此外还有 window.print()可以打印当前页面。

在弹出对话框时 JS 会暂停运行，对话框关闭后恢复。

locatin 对象

location 对象提供了与所加载的文档有关的信息还提供了一些导航功能，它既是 window 的属性也是 document 的属性。

查询字符串参数

查询字符串中包含多个参数，它们之间使用 & 连接。每一个参数又是由 name = value 的形式构成，其中的 name 和 value 都是编码过的.
因此，如果需要查看每个字符串就要首先取得查询字符串并去掉开头的问号。然后通过&来分隔各个参数。对于每个参数通过 = 分割出 name 和 value 两个部分，最后通过 decodeURIComponent() 来对 name 和value 解码。

function getQueryStringArgs () {
    //获取查询字符串并去掉问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //初始化变量
    args = {},
    items = qs.length ? qs.split("&") : [],
    item = null,
        name = null,
        value = null,
        i = 0,
        len = items.length;
    //对每一项参数添加到 args 中作为 args 的属性
    for (i=0; i < len; i++) {
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name] = value;
        }
    }
    return args;
}
var args = getQueryStringArgs();

• decodeURIComponent() 方法可以对 URI 的组成部分进行解码，既可以解码 utf-8 也可以解码 unicode。
• unescape() 只能够解码 unicode。

对于编码有三种方式

• escape() 这种方式将字符串编码为 unicode 格式
• decodeURI() 这种方式将 URI 编码为 utf-8格式，不会编码 URI 中会使用到的特殊符号如"; / ? : @ & = + $ , #"
• decodeURIComponent() 这种方式将 URI 中的部分编码为 utf-8格式，会对所有字符进行编码。

位置操作

使用 location 对象可以改变浏览器的位置。

• 最常用的方式就是 location.assign() 方法，为这个方法传入一个 URL 可以立即打开新的 URL。location.assign()、location.href、window.location 三种跳转的方式一样。跳转之后都会在历史记录中生成一条记录，也就是说用户可以通过后退来回到跳转前的页面。
• 另外也也可以通过 location.hash() 等方法改变部分 URL 来跳转。
• location.replace() 方法传入一个 URL，跳转到新的 URL。与之前的方法不同的是，这个方法跳转后不会生成历史记录，用户不能后退到跳转前的页面。
• location.reload() 方法重新加载该页面，如果不传入参数则可能从浏览器缓存中重新加载，传入 true 则强制从服务器重新加载。

navigator 对象

navigator 对象中记录了与浏览器和系统有关的许多属性，以下是部分属性。

顺便补充一点浏览器标识
userAgent 返回浏览器标识，以下是 win10 下的 Edge 浏览器的返回值。
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586"

• 第一节Mozilla/5.0 (Windows NT 10.0; Win64; x64),前半段 Mozilla/5.0 是所有浏览器共有的，是出于兼容性考虑 的一种伪装，没有实际意义。后半段括号内的内容为系统版本。
• 第二节AppleWebKit/537.36 (KHTML, like Gecko)是浏览器引擎,其中括号中的 like Gecko 也是一种伪装。
• 第三节Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586也都是伪装。

只有 Firefox 在的 user-agent 中没有进行伪装。
"Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0"
appVersion 在其他浏览器中都是 useragent 去掉开头的 Mozilla，如：
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586"
Firefox 中的 appVersion 为"5.0 (Windows)"。

检测插件

对于非 IE 浏览器，navigator.plugins[]数组储存了所安装的所有插件，每一项都包含有以下属性。

• name：插件名
• description：插件的描述
• filename：插件的文件名
• length：插件所处理的 MIME 类型数量
  

只要对插件名进行检索就可以知道插件是否存在。

function hasPlugin(name) {
    name = name.toLowerCase();
    for (var i=0; i < navigator.plugin.length; i++) {
        if (navigator.plugin [i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
    return false;
}

IE 中的插件是以 COM 对象的方式实现的，COM 对象以 COM 标识符来标识。在 IE 中插件有专有的类型 ActiveXObject，尝试创建一个插件的实例创建成功就说明插件存在。

function hasIEPlugin(name){
    try {
        new ActiveXObject(name);
        return true;
    } catch (ex){
        return false;
    }
}

screen 对象

screen 对象储存了关于显示器的信息，其中大多属性为只读。以下为部分属性。

screen 对象可以用来通过屏幕大小调整浏览器窗口大小。另外 IOS 中屏幕大小始终返回竖屏下大小。

history 对象

history 对象保存着用户的历史记录，出于安全考虑，无法获取用户历史记录的实际 URL，但是依然可以调用 history 对象的方法来实现前进和后退。下面给出几个例子。

//后退一页
history.go(-1);
//前进两页
history.go(2);
//跳转到最近的 wrox.com 页面中，可以前进也可以后退
history.go("worx.com");
//后退一页
history.back();
//前进一页
history.forward();

在大量使用 ajax 的今天，页面往往都不需要再刷新，因此就无法在使用前进与后退。因此 history 对象中提供了一个 state 属性来保存一些与 ajax 的历史记录有关的数据。可以通过 pushState()方法和 replaceState()方法来写入这个属性。这两个属性都接受三个参数，要储存的数据、页面标题和页面 URL。其中页面 URL 必须与页面在同一个域内。