BOM（浏览器对象模型）

BOM提供了很多对象，用于访问浏览器的功能。

1、window对象

　　BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象既是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的global对象。因此，全局变量是 window 对象的属性。全局函数是 window 对象的方法。

注：定义全局变量与在window对象上直接定义属性还是有一点差别的（全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以）。

var age = 2;
window.color = 'blue';

console.log(delete window.color)//在ie < 9时抛出错误，其他返回true
console.log(delete window.age)//在ie < 9时抛出错误，其他返回false

console.log(window.haha);//undefined

在上例中使用var与句添加window属性有一个名为[[Configurable]]的特性，这个特性值被设为false，因此不能通过delete被删除。另访问未声明变量会抛出错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在。

2、window窗口关系与框架

　　如果在网页中包含框架则每个框架都拥有自己的window对象，并且保存在frames集合中，可以通过数值索引或者框架名称来访问相应window对象。每个window对象都有个name属性，其中包含框架名称。

<html>
    <head>
        <title>Frames Example</title>
    </head>
    <frameset rows="160,*">
        <frame src="frame.htm" name="topFrame">
        <frameset cols="50%,50%">
            <frame src="leftFrame.htm" name="leftFrame">
            <frame src="rightFrame.htm" name="rightFrame">
        </frameset>
    </frameset>
</html>

（1）通过window.frame[0]或window.frame['topFrame']来引用上方的框架。

（2）通过top对象来引用（top对象始终指向最高最外层的框架，也就是浏览器窗口，它可以确保在一个框架中正确得访问另一个框架）例：top.frames[0]。

（3）通过parent对象来访问当前框架的直接上层框架。

3、窗口Window Screen

　　window.screen 对象包含有关用户屏幕的信息。

（1）窗口大小

window.screen.availWidth;//可用的屏幕宽度,以像素计，减去界面特性，比如窗口任务栏
window.screen.availHeight;//可用的屏幕高度,以像素计，减去界面特性，比如窗口任务栏
window.screen.width;//屏幕宽度（分辨率值）
window.screen.height;//屏幕高度（分辨率值）
window.innerWidth;//容器中页面视图区宽
window.innerHeight;//容器中页面视图区高
window.outerWidth;//浏览器窗口宽
window.outerHeight;//浏览器窗口高
document.body.clientWidth;//容器中页面视图区宽
document.body.clientHeight;//容器中页面视图区高
window.document.body.offsetWidth;//返回当前网页宽度（不包括外边距）
window.document.body.offsetHeight; //返回当前网页高度 （不包括外边距）

console.log(window.screen.availWidth+','+window.screen.availHeight);//1366, 728
console.log(window.screen.width+','+window.screen.height);//1366, 768
console.log(window.innerWidth+','+window.innerHeight);//1366, 662
console.log(window.outerWidth+','+window.outerHeight);//1366, 728
console.log(document.body.clientWidth+','+document.body.clientHeight);//1366, 662
console.log(window.document.body.offsetWidth+','+window.document.body.offsetHeight);//1366, 646

另外，使用resizeTo()和resizeBy()可以调整浏览器窗口大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽高差。

例：

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

（2）窗口位置

　　window.screenLeft、window.screenTop和window.screenX、window.screenY用于确定和修改window对象位置。

注：所有主流浏览器都支持screenLeft和screenTop属性，Firefox除外。 Firefox 浏览器请使用 "window.screenX" and "window.screenY"。

4、打开新窗口

（1）window.open()既可导航到特定的URL，也可打开新的的浏览器窗口。

　　语法：window.open(URL, 窗口目标, 特性字符串, 是否打开新窗口的布尔值);

例：

window.open('http://www.xxx.com', 'topFrame');//等同于<a href="http://www.xxx.com" target="topFrame"></a>

第二个参数还可以是：_self、_parent、_top、_blank;
第三个参数：是一个逗号分隔的设置字符串，表示新窗口中都显示哪些特性。
特性字符串：width、height、top、left（数值，表示窗口大小位置）;
　　　　　　location（yes/no，表示是否在浏览器中显示地址栏）;
　　　　　　menubar（yes/no，是否显示菜单栏）;
　　　　　　resizable(yes/no，是否可拖动边框进行缩放)；
　　　　　　scrollbars(yes/no，是否允许滚动)；
　　　　　　status(yes/no，是否显示状态栏)；
　　　　　　toolbar(yes/no，是否显示工具栏)；

例：

window.open('http://www.xxx.com','wxoxWindow','width=100,height=100,top=10,left=10,resizable=yes');

（2）window.close()关闭窗口

　　该方法仅适用于通过window.open()打开的窗口。

5、间歇调用和超时调用

　　javascript是单线程语言，它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者指在指定的时间过后执行代码，后者则是每隔指定时间就执行一次代码。

（1）超时调用setTimeout()方法，可以使用clearTimeout()取消超时调用。

例：

var timeTd = setTimeout('执行代码',1000);//延迟1秒后执行代码
    clearTimeout(timeId);//取消超时调用

注：超时调用函数中在非严格模式下指向window对象，在严格模式下是undefined。

（2）间歇调用setInterval()，清除间歇调用clearInterval()。

例：

var num = 0,max = 5;
    function sum(){
        num++;
        if(num == max){
            clearInterval(intervalId);//当num等于max时，清除调用
            console.log(num);
        }
    }
    intervalId = setInterval(sum, 500);//每500ms调用一次函数sum

 6、location对象

　　locaton提供了与当前窗口加载的文档有关的信息，还提供了一些导航功能。

例：

console.log(location.hash);//返回url中的hash（#号后的字符）
console.log(location.host);//返回url的服务名称和端口号
console.log(location.hostname);//返回不带端口号的服务器名称
console.log(location.href);//返回当前加载页面的完整URL
console.log(location.pathname);//返回url中的目录和（或）文件名
console.log(location.port);//返回url中的指定端口号
console.log(location.protocol);//返回页面使用的协议（通常为http:或https:）
console.log(location.search);//返回url的查询字符串（字符串以问号开头）

注：location既是window对象的属性，也是document对象的属性。即window.location与document.location引用的是同一个对象。

（1）位置操作

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

例：

location.assign('http://www.xxx.com');//打开新的url，并生成浏览器历史记录。

注：使用location.href或window.location，也会调用assign()方法。

通过修改location对象属性可以改变当前加载页面。

例：

//假设初始url为http://www.xxx.com/

//将url修改为http://www.xxx.com/#section1
location.hash = '#section1';

//将url修改为http://www.xxx.xom/?q=hahah
location.search = '?q=hahah';

//将url修改为http://www.xxx.com/mydir/
location.pathname = 'mydir'

//将url修改为http://www.xxx.com:8080/
location.port = 8080;

注：每次修改location属性（hash除外），页面都会以新的url重新加载。

7、navigator对象

　　提供与浏览器有关的信息。

例：

console.log('浏览器代号:'+navigator.appCodeName);//浏览器代号: Mozilla
console.log('浏览器名称:'+ navigator.appName);//浏览器名称: Netscape
console.log('浏览器版本:'+ navigator.appVersion);//浏览器版本: 5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cornlin/p/7583568.html