BOM（浏览器对象模型）

window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象。
navigator：代表当前浏览器的信息，通过对象可以来识别不同的浏览器。
location：代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面。
history：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。由于隐私原因，该对象不能获取具体的历史记录，只能操作浏览器向前后向后翻页，而且只能在当次访问时有效。
screen：代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息。

1.1window对象

在浏览器中，window对象有双重角色，它既是通过js访问浏览器窗口的一个接口，又是规定的global对象。

1.1.1 全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
全局变量（即通过var定义的）不能通过delete操作符删除，而直接在window对象上的定义的属性可以删除。
尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

在这里插入图片描述

1.1.2 窗口关系及架构

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。

top对象始终指向最高（最外）层的框架，也就是浏览器窗口。
parent对象是与top相对的另一个window对象。parent（父）对象始终指向当前框架的直接上层。在某些情况下，parent有可能等于top；但在没有框架的情况下，parent一定等于top（此时他们都等于window）
self对象。它始终指向window；self和window对象可以互换使用，它不格外包含其他值。

1.1.3 窗口位置

使用下列代码可以跨浏览器取得窗口左边和上边的位置：

var leftpos = (typeof window.screenLeft == "number") ? window.screenLeft:window.screenX;
var toppos = (typeof window.scrollTop == "number") ? window.screenTop:window.screenY;

moveTo()接收的是新位置的x和y坐标值
moveBy()接收的是在水平和垂直方向上移动的像素数

//将窗口移动到（200,300）
window.moveTO(200,300);
//将窗口向左移动50像素
window.moveBy(-50,0);

这两个方法都不适用于框架，只能对最外层的window对象使用。

1.1.4 窗口大小

使用 resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。但这两个方法也不适用与框架，而只能对最外层的window对象使用。

resizeTo()接收浏览器窗口的新宽度和新高度
resizeBy()接收新窗口与原窗口的宽度和高度之差

//调整到100*100
window.resizeTo(100,100);
//调整到200*150
window.resizeBy(100,50);

1.1.5 导航和打开窗口

使用 window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。接收四个参数。通常只需要传递第一个参数

要加载的URL
窗口目标（_self , _parent , _top ,_blank）
一个特性字符串
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

我们可以针对通过window.open()创建的窗口调整大小或移动位置。

1.1.6 间歇调用和超时调用

超时调用

需要使用window对象的setTimeout()方法，它接受两个参数：
1. 要执行的代码
2. 以毫秒表示的时间

如：

setTimeout(function(){
    
    
    alert("hello world");
},1000)

调用setTimeout（）之后，该方法会返回一个数值ID，表示超时调用。

在指定的时间尚未完全过去之间调用 clearTimeout()，就可以完全取消超时调用。如：

setTimeout(function(){
    
    
    alert("hello world");
},1000);
//把它取消
clearTimeout(timeoutid);

间歇调用

最好不要使用

setInterval()方法，接收的参数为：

要执行的代码（字符串或函数）和每次执行之前需要等待的毫秒数

clearInterval()方法取消间歇调用

1.1.7 系统对话框

alert()
- 接受一个字符串并将其显示给用户。其中包含指定文本和一个ok（“确定”）按钮。
confirm()
- 接受一个字符串并将其显示给用户。其中包含文本和确定、取消按钮。
prompt()
- 一个提示框。用于提示用户输入的一些文本。提示框中除了显示ok和cancle按钮之外，还会显示一个文本输入域，以供用户在其中输入内容。

1.2 location对象

他提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location对象既是window对象的属性，也是document对象的属性；即window.location和document.location引用的是同一个对象。

location对象的属性：（省略了每个属性前面的location）

var args = getQueryStringArgs();
alert(args["q"]);  
alert(args["num"]);

hash ：返回#后面跟0或多个字符串
host：返回服务器名称和端口号（如果有）
hostname：返回不带端口号的服务器名称
href：返回当前加载页面的完整URL
pathname：返回URL中的目录和（或）文件名
port：返回URL中指定的端口号
protocol：返回页面使用的协议
search：返回URL的查询字符串。这个字符串以？开头

1.2.1 查询字符串参数

创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象。如下：

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 = item.length;
    
    for(i=0;i<len;i++){
    
    
        item = item[i].split("=");
        name = decodeURLComponent(item[0]);
        value = decodeURLComponent(item[1]);
        
        if(name.length){
    
    
            args[name] = value;
        }
    }
    return args;
    
}

假设查询到的是：

//假设查询字符串是 ?q=javascript&num=10

var args=getQueryStringArgs();
alert(args["q"]);  //"javascript"
alert(args["num"]);  //"10"

1.2.2 位置操作

使用location对象可以通过很多方式来改变浏览器的位置。

assign()方法

使用此方法并为此传递一个URL。这样，就可以立即打开新URL并在浏览器的历史记录中**生成一条记录**。

location.assign("http://sandystar.xyz");
//下面两种方法与上面这个效果一样
window.location = "http:/sandystar.xyz";
location.href="http://sandystar.xyz";

注：最常设置的是location.href属性，每次修改location的属性（hash除外），页面都会以新的URL重新加载。

replace()方法

用于禁止用户通过单击“后退”按钮导航到前一个页面。此方法只接受一个参数，即要导航到的URL。结果虽然会导致浏览器的位置改变，但不会在历史记录汇总生成新的记录。

location.replace("http://sandystar.xyz");

reload()方法

作用是重新加载当前显示的页面。如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。

location.reload();  //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载），强制清空缓存刷新页面

最好将此方法放在第一行（为了确保执行）

1.3 navigator对象

此对象现在已经成为识别客户浏览器的事实标准。它有好多属性和方法，此对象的属性通常用于检测显示网页的浏览器类型。

1.3.1 插件检测

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE浏览器，可以使用plugins数组来达到这个目的。该数组的每一项都包含下列属性：

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

1.3.2 注册处理程序

registerContentHandler()方法

该方法接收三个参数：

要处理的MIME类型
可以处理该MIME类型的页面URL
应用程序的名称

registerProtocolHandler()方法

接收三个参数：

要处理的协议（例如：mailto或ftp）
处理该协议的页面的URL
应用程序的名称

1.3.3 识别浏览器

通过userAgent属性来识别浏览器。

var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
    
    
    alert("火狐");
}else if(/chrome/i.test(ua)){
    
    
    alert("chrome");
}else if(/msie/i.test(ua)){
    
    
    alert("ie");
}else if("ActiveXObject" in window){
    
    
    alert("你是IE11");
}

在IE11中已经将微软和IE相关的表示都已经去除，所以基本已经不能用userAgent来识别一个浏览器是否是IE了。

该属性可以用来设置在不同的浏览器显示什么内容，所以先识别浏览器的内容。

1.4 screen对象

该对象基本上只用来表明客户端的能力，如像素宽度和高度等

window.resizeTo(srceen.availWidth,screen.availHeight);
//用于把窗口大小调整为指定的宽度和高度

1.5 history对象

该对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。History是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

go()方法

可以在用户的历史记录中任意跳转，可以向前也可以向后。该方法接收一个参数：表示向前或者向后的跳转的页面的一个整数值。

负数表示向后，正数表示向前跳转。

//后退一页
history.go(-1);
//前进一页
history.go(1);
//跳转到最近的wrox.com页面
history.go("wrox.com")

history.back()  //后退一页
history.forward()  //前进一页
history.length()  //保存历史记录的数量

该方法也可以传递字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置。

此属性可以用来做自动跳转。

后。该方法接收一个参数：表示向前或者向后的跳转的页面的一个整数值。