BOM

一、什么是BOM？

BOM是browser object model的缩写，简称浏览器对象模型 主要处理浏览器窗口（window）和框架（iframe），描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。扩展如下：

　　1.弹出新的浏览器窗口

　　2.移动、关闭浏览器窗口以及调整窗口大小

　　3.提供 Web 浏览器详细信息的定位对象

　　4.提供用户屏幕分辨率详细信息的屏幕对象

　　 5.对 cookie 的支持 6.IE 扩展了BOM，加入了ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

 

二、关于BOM知识的思维导图

三、主流浏览器的介绍

　　浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

　　目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

四、BOM对象

　　window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
　　document 对象，文档对象；
　　location 对象，浏览器当前URL信息；
　　navigator 对象，浏览器本身信息；
　　screen 对象，客户端屏幕信息；
　　history 对象，浏览器访问历史信息；

1）、Window对象：BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。 

　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
　　全局变量是 window 对象的属性。
　　全局函数是 window 对象的方法。

　　window对象常用方法有

　　　　window.alert('提示信息')

　　　　window.confirm("确认信息")
　　　　window.prompt("弹出输入框")
　　　　window.open("url地址"，“打开的方式（可以是-self或-black）”，“新窗口的大小”）

　　　　注：如果url为空，则默认打开一个空白页面，如果打开方式为空，则默认为新窗口方式打开页面。返回值为：返回新打开窗口的window对象

　　　　close()  关闭当前的网页。 注：存在兼容性问题：FF：禁止设置关闭浏览器的代码

                                                               　　　　　　　 Chrome：默认直接关闭

                                                               　　　　　 　　IE：询问用户

　　　　window.moveTo() - 移动当前窗口
　　　　window.resizeTo() - 调整当前窗口的尺寸

 

　　定时器，清除定时器。

　　　　setTimeout (函数，时间) 只执行一次
　　　　setInterval (函数，时间) 无限执行

　　　　clearTimeout / clearInterval (定时器名称) 清除定时器

1、window 对象属性

 

2、window对象方法

 

 

2）、location对象

　　1、对象属性

　　　　window.location:   对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

　　　　location.herf = 'url地址'  返回完敕的URL
　　　　hash： 返回#号后面的字符串，不包含散列，则返回空字符串。
　　　　host：  返回服务器名称和端口号
　　　　pathname： 返回目录和文件名。 /project/test.html
　　　　port： 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串
　　　　portocol： 返回页面使用的协议。 http:或https:
　　　　search： 返回？号后面的所有值。

 　　2、对象方法

　　　　 

3）、navigator对象

　　window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

　　navigator.platform：操作系统类型；
　　navigator.userAgent：浏览器设定的User-Agent字符串。
　　navigator.appName：浏览器名称；
　　navigator.appVersion：浏览器版本；
　　navigator.language：浏览器设置的语言；
　　userAgent是最常用的属性，用来完成浏览器判断。

　　cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值。

　　onLine：返回指明系统是否处于脱机模式的布尔值。

　　userAgent：返回由客户机发送服务器的 user-agent 头部的值。

 

 4）、History 对　　History 对象包含用户（在浏览器窗口中）访问过的 URL

 

1、window.location.href = '你所要跳转到的页面';
2、window.open('你所要跳转到的页面’);
3、window.history.back(-1):返回上一页
4、window.history.go(-1/1):返回上一页或下一页五、
5、history.go("baidu.com")

 

5）、Screen 对象

　　Screen 对象包含有关客户端显示屏幕的信息。每个 Window 对象的 screen 属性都引

用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将

利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器

的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色

还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器

窗口定位在屏幕中间。

　　screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。                                         

　　screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

　　document.write ( screen.availHeight + screen.availWidth );    //获取屏幕的宽度和高度之和

 

版权声明：本文为CSDN博主「冰雪为融」的原创文章。
原文链接：https://blog.csdn.net/lhjuejiang/article/details/79453407