温故js系列（11）-BOM

前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总

欢迎提issues斧正：BOM

JavaScript-BOM

BOM是browser object model的缩写，简称浏览器对象模型。它自己是没有标准的或者尚未哪一个组织去标准它，因此，BOM缺少标准。它提供了不少对象，而且每一个对象都提供了不少方法与属性，用于访问浏览器的功能。

window对象

BOM的核心对象是window，它表示浏览器的一个实例，主要用于管理窗口与窗口之间的通信。window 对象处于JavaScript结构的最顶层，对于每一个打开的窗口，系统都会自动为其定义window 对象。F12打开console,输入window,便可看到window的全部属性和方法。太多了，不少是不须要咱们去深刻了解的。

window 对象的属性

属性                         含义
closed                 当窗口关闭时为真
defaultStatus          窗口底部状态栏显示的默认状态消息
document               窗口中当前显示的文档对象
frames                 窗口中的框架对象数组
history                保存着窗口最近加载的URL
length                 窗口中的框架数
location               当前窗口的URL
name                   窗口名
offscreenBuffering     用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新
opener                 打开当前窗口的窗口
parent                 指向包含另外一个窗口的窗口（由框架使用）
screen                 显示屏幕相关信息，如高度、宽度（以像素为单位）
self                   指示当前窗口。
status                 描述由用户交互致使的状态栏的临时消息
top                    包含特定窗口的最顶层窗口（由框架使用）
window                 指示当前窗口，与self 等效

要验证这些属性，直接F12打开console，验证便可。

window 对象的方法

方法                                 功能
alert(text)                  建立一个警告对话框，显示一条信息
blur()                       将焦点从窗口移除
clearInterval(interval)      清除以前设置的定时器间隔
clearTimeOut(timer)          清除以前设置的超时
close()                      关闭窗口
confirm()                    建立一个须要用户确认的对话框
focus()                      将焦点移至窗口
open(url,name,[options])     打开一个新窗口并返回新window 对象
prompt(text,input)           建立一个对话框要求用户输入信息
scroll(x,y)                  在窗口中滚动到一个像素点的位置
moveBy(x,y)                  按照给定像素参数移动指定窗口,x,y表明水平位移量和垂直位移量
moveTo(x,y)                  将窗口移动到指定的指定坐标(x,y)处
resizeBy(x,y)                将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小
resizeTo(x,y)                将当前窗口改变大小，x、y分别为宽度和高度
print()                      调出打印对话框
find()                       调出查找对话框
setInterval(func,time)       通过指定时间间执行代码
clearInterval("id");         取消setInterval    
setTimeout(func,time)        在定时器超事后执行代码
clearTimeout("id");          取消还未执行的setTimeout

window下的属性和方法，可使用window.属性、window.方法()或者直接属性、方法()的方式调用。下面简要介绍几个。

window属性-窗口的位置和大小

窗口的位置，IE、Safari、Opera 和Chrome都提供了screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。

console.log(screenLeft);   //102, fireFox下输出screenLeft is not defined
console.log(screenX);      //102

兼容：

var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

窗口页面大小，IE、Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性：innerWidth和innerHeight，返回浏览器窗口自己的尺寸；outerWidth 和outerHeight，返回浏览器窗口自己及边框的尺寸。

console.log(innerWidth);  //1366 页面宽度
console.log(innerHeight); //681 页面高度
console.log(outerWidth);  //1366 页面长度+边框
console.log(outerHeight); //768 页面高度+边框
//缩小窗口数据就会有变化

旧的IE版本没有提供当前浏览器窗口尺寸的属性。不过，DOM有提供相关的方法：

document.documentElement.clientWidth
document.documentElement.clientHeight

固然，这是标准模式下，还要兼容怪异模式：

document.body.clientWidth; //非标准模式使用body
document.body.clientHeight;

window方法-系统对话框

浏览器经过alert()、confirm()和prompt()方法能够调用系统对话框向用户显示信息。

alert()

alert('xzavier warning');

直接弹出弹框，弹框只有肯定和关闭按钮。
通常用于用户交互时作出提示，不过这种方法的用户体验不是很好，如今都流行使用业务须要的用户体验好的弹窗。
另外，之前经常使用于调试代码，但如今基本不用了。由于它很烦，弹一个要关一个。若是调试代码后忘记关掉，还会给用户带来较差的体验。如今都用console，在控制台打印，研发人员能够很方便的看到调试信息，也不用去关闭弹窗之类的，就算一时疏忽忘记删掉调试代码，也不会影响到用户体验。

confirm()

confirm('confirm or cancel');

肯定和取消弹框，按肯定返回true，按取消或者关闭按钮返回false。

if (confirm('confirm or cancel')) { 
    alert('you confirmed'); 
} else {
    alert('you canceled');
}

prompt()

prompt('please input a number', 0);

输入提示框，带两个参数，一个提示，一个值。按肯定返回输入值，不填返回空，按取消或者关闭按钮返回null。

window方法-新建窗口

window.open()方法能够导航到一个特定的URL，也能够打开一个新的浏览器窗口。它能够接受四个参数：
1.要加载的URL
2.窗口的名称或窗口目标
3.一个字符串参数，表示新窗口的长宽等属性值
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

open('https://segmentfault.com/blog/xzavier'); //新建页面并打开
open('https://segmentfault.com/blog/xzavier','xzavier'); //新建页面并命名窗口并打开
open('https://segmentfault.com/blog/xzavier','_parent'); //在本页窗口打开

target 属性：
blank - 在一个新的未命名的窗口载入文档
_self - 在相同的框架或窗口中载入目标文档
_parent - 把文档载入父窗口或包含了超连接引用的框架的框架集
_top - 把文档载入包含该超连接的窗口,取代任何当前正在窗口中显示的框架

字符串参数：

属性         值             说明
width       数值      新窗口的宽度 ，不能小于100
height      数值      新窗口的高度，不能小于100
top         数值      新窗口的Y坐标，不能是负值
left        数值      新窗口的X坐标，不能是负值
location   yes/no    是否在浏览器窗口中显示地址栏，不一样浏览器默认值不一样
menubar    yes/no    是否在浏览器窗口显示菜单栏，默认为no
resizable  yes/no    是否能够经过拖动浏览器窗口的边框改变大小，默认为no
scrollbars yes/no    若是内容在页面中显示不下，是否容许滚动，默认为no
status     yes/no    是否在浏览器窗口中显示状态栏，默认为no
toolbar    yes/no    是否在浏览器窗口中显示工具栏，默认为no

open('https://segmentfault.com/blog/xzavier','xzavier','width=600,height=400,top=200,left=400,resizable=yes');
//相似一个弹窗弹出一个网页，open有返回值，返回window对象

window方法-setTimeout和setInterval

JavaScript是单线程语言，它容许经过设置超时值和间歇时间值来调度代码在特定的时刻执行。setTimeout在指定的时间事后执行代码，setInterval是每隔指定的时间就执行一次代码。

setTimeout

接受两个参数：要执行的代码和超时时间（单位：毫秒）

function timer() {
    console.log("xzavier's timer");
}
setTimeout(timer, 2000);

setTimeout()返回一个数值ID，表示这个超时调用。这个ID是超时调用的惟一标识符，能够经过它来取消超时调用。要取消还没有执行的超时调用，能够调用clearTimeout()方法并将相应的超时调用ID做为参数传递给它。

function timer() {
    console.log("xzavier's timer");
}
var xzavier = setTimeout(timer, 2000);
clearTimeout(xzavier);  //取消超时调用不执行

setInterval

setInterval按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，接受参数：要执行的代码和每次执行以前须要等待的毫秒数

setInterval(function () {
    console.log('xzavier');
}, 2000);

取消间歇调用方法和取消超时调用相似，使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用，由于在不加干涉的状况下，间歇调用将会一直执行到页面关闭。

var xzavier = setInterval(function () { 
    console.log('xzavier');
}, 1000);
clearInterval(xzavier);

通常来讲，使用了setInterval就必定要使用clearInterval去清除，因此，使用超时调用来模拟间歇调用是一种最佳模式。由于，使用超时调用时，不必跟踪超时调用ID，由于每次执行代码以后，若是再也不设置另外一次超时调用，调用就会自行中止。

location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息。location对象是window对象的属性，也是document对象的属性。因此window.location和document.location等效。

location 对象的属性

属性        描述的URL内容
host        主机名：端口号
hostname    主机名
href        URL
pathname    路径名
port        端口号
protocol    协议部分
search      查询字符串
hash        若是该部分存在，表示锚点部分

location 对象的方法

方法           功能
assign()  跳转到指定页面，与href等效
reload()  重载当前URL
repalce() 用新的URL 替换当前页面

F12打开调试器，console下打印window.location便可查看location的属性和方法。

location.reload();        //最有效的从新加载，有可能从缓存加载
location.reload(true);    //强制加载，从服务器源头从新加载
location.assign('https://segmentfault.com/blog/xzavier');  //跳转到指定的URL
location.replace('https://segmentfault.com/blog/xzavier'); //能够避免产生跳转前的历史记录，跳转后浏览器不能返回上一个页面

navigator对象

navigator对象，其实也是window对象的属性，包含大量有关Web浏览器的信息，在检测浏览器及操做系统上很是有用。

console.log(navigator.userAgent);  
//用户代理头信息，不少时候用于判断浏览器  Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.appCodeName);  
//浏览器代码名 Mozilla 
//appCodeName 属性是一个只读字符串，声明了浏览器的代码名。
//在全部以 Netscape 代码为基础的浏览器中，它的值是 "Mozilla"。
//为了兼容起见，在 Microsoft 的浏览器中，它的值也是 "Mozilla"。
console.log(navigator.appName);  
//官方浏览器名 Netscape
//appName返回所使用浏览器的名称。该属性并不必定能返回正确的浏览器名称。
//在基于 Gecko 的浏览器 （例如 Firefox）和基于 WebKit 的浏览器
//（例如 Chrome 和 Safari）中，返回的浏览器名称都是 "Netscape". 
console.log(navigator.appVersion);  
//浏览器版本信息  5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.cookieEnabled);  
//是否启用cookie，返回true/false  
console.log(navigator.javaEnabled);  
//是否启用java，返回true/false  
console.log(navigator.platform);  Win32
//浏览器所在计算机平台  
console.log(navigator.plugins);  
//安装在浏览器中的插件数组  PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}

history对象

history对象是window 对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。
history对象有一个length属性，表示history 对象中的记录数。history对象有三个方法。

方法                     功能
back()       前往浏览器历史条目前一个URL，相似后退
forward()    前往浏览器历史条目下一个URL，相似前进
go(number)   跳转指定历史记录的URL

screen对象

screen对象是window 对象的属性,用于获取屏幕的信息。

属性             描述
width        屏幕的宽度 
height       屏幕的高度 
availWidth   窗口可使用的屏幕的宽度
availHeight  窗口可使用的屏幕的高度

document对象见： 温故js系列-DOM