BOM对象和方法

什么是`BOM`

BOM是browser object model的缩写简称浏览器对象模型是浏览器的额一个实例

主要处理浏览器窗口和框架秒速与浏览器进行交互的方法和接口访问和操作浏览器窗口通常浏览器特定的JavaScript扩展都被看做BOM的一部分

BOM的主要扩展

弹出新的浏览器窗口
移动关闭浏览器窗口以及调整窗口大小
提供WEB浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对Cookie的支持
IE扩展了BOM 加入了ActiveXObject类可以通过JavaScript实例化Active对象

BOM的组成

Window JavaScript层级中顶层对象表示浏览器窗口
Navigator 包含客户端浏览器的信息
History 包含了浏览器窗口访问过的URL
Location 包含了当前URL的信息
Screen 包含了客户端显示屏的信息

BOM和DOM的关系

JavaScript语法的标准化组织是ECMA

DOM的标准化组织是W3C

BOM每个浏览器都有自己的标准

BOM包括window对象上面的属性和方法还包括window的属性中的对象的属性和方法

这些对象上面有构造函数构造函数定义了方法通过原型的方式来继承通过原型的方式来继承

比如screen屏幕中提供了一些具体方法 navigator导航中提供了一些具体方法…

BOM的组成

Window JavaScript 层级中的顶层对象表示浏览器窗口

window对象是BOM的顶层对象他有双重角色是通过JavaScript访问浏览器窗口的一个接口也是ES规定的Global对象(有权访问parseInt等方法)
- 全局中声明的变量对象和函数都会变成window对象的属性和方法
  
  定义在全局上和定义在window上的区别:全局变量不能通过delete操作符删除因为var添加的window属性有一个[Configrable]特性并且被设置为false 而定义在window对象上的属性可以在IE8及以下 delete删除window属性会报错 IE9以上不会
  
  尝试访问未声明的变量会抛出错误但是通过查询window对象可以知道这个变量是否存在
- window.inner包含滚动条的宽度 clientwidth这两个可视区域不包含滚动条的宽度各个浏览器提供了一样的几个属性 innerWidth outerWidth等但是范围不一样例如outerWidth 有的是返回浏览器本身尺寸有的是浏览器窗口大小
- window.resize调整浏览器窗口大小但是也可能被禁用
- window.screenX(firefox)||window.screenLeft(opera中使用这个)
  
  typeof window.screenLeft == "number" ? window.screenLeft : window.screenX
  
  在IE和欧鹏中即使浏览器上面紧贴屏幕上面也会返回工具栏的高度而且窗口由于设置外边距而偏移的时候会返回精确计算的值而其他浏览器会返回0 而且窗口由于设置外边距而偏移的时候不会返回精确计算的值会返回不偏移的时候的值
- window.moveTo||window.moveBy 让浏览器窗口移动到某个位置但是可能会被禁用在欧鹏和IE7最高版本中就是禁用的
- window.parent表示包含当前框架的框架在子页面中使用window.parent可以得到父页面的window对象也可以得到属性但是不能操作父页面的dom元素(iframe:再页面中又嵌套一个完整的页面可以通过数值或框架的名称来索引) 在页面中没有框架的时候window.parent=window.top=window
- window.top拿到页面最顶级的框架也就是浏览器窗口它可以确保在一个框架中正确的访问另一个框架而window指的都是当前框架自己的实例
  
  在全局上var parent=10其实是取出window的属性进行赋值了 top也是可以直接用top.xxx进行访问框架 window.top不能被赋值
- window.self之前window是可以被赋值的用 window.self==window可以防止冲突赋值引入的目的只是为了与top和parent对象对应起来属性返回指向当前 window 对象的引用 window、self、window.self 是等价的
```
if (window.top!=window.self) {
    document.write("<p>这个窗口不是最顶层窗口!当前窗口在一个框架中</p>")
}
else{ 
    document.write("<p>这个窗口是最顶层窗口!当前窗口不在一个框架中</p>")
} 
//在一个框架表示是不是被其他框架包含在内
```
- window.name设置后在不同的网页中都可以取到这个值也是iframe形成父子之间通信的媒介之一除非最高层窗口是通过window.oped打开的否则其对象的name属性不会包含任何值
- window.confirm 确定或取消返回布尔值
- window.alert
- window.prompt 弹出输入框没输入就返回null
  
  在一些浏览器中如果打开了多个对话框那么从第二个对话框开始每个对话框都会显示一个复选框用来阻止后续对话框的显示
- window.find查找对话框
- window.print打印对话框
  
  其他两个可以用js打开的对话框不会受对话框计数器控制也不受禁用后续对话框显示的影响
- window.onbeforeunload ie10以下可以写提示信息
- window.open打开一个新窗口参数为网址、名字、特征值、在浏览历史中创建新的url还是替换当前url 写了特征值会在另外一个浏览器打开没写会在当前浏览器中打开可以打印新窗口里面的属性但是不能操作最后一个参数只在不打开新窗口的情况下使用返回一个指向新窗口的引用
  
  可以用close方法关闭新打开的窗口关闭之后对象的引用还在但是由于很多人用于广告所以浏览器激起了限制也有很多浏览器设置了弹出窗口屏蔽程序
- 超时调用setTimeout和间歇调用setInterval
```
//用setTimeout模拟setInterval
var num = 0
var max = 10
function incrementNumber(){
    num++
    if(num < max){
        setTimeout(incrementNumber, 500)
    }else{
        alert("done")
    }
}
console.log("hahah")
```
Navigator包含客户端浏览器的信息他是所有支持JavaScript的浏览器所共有的 navigator的属性通常用于检测浏览器类型
- navigator.name(输出的全是navigator)
- navigator.plugins检测插件非ie浏览器可以使用plugins数组检测包括name(插件名) description(插件描述) filename(文件名) length(插件处理的MIME类型数量)等属性检测IE的插件比较麻烦
- navigator.codename(输出的全是mozilla)
- navigator.appVeison(比userAgent少一个信息)
- navigator.userAgent:返回内核操作系统浏览器版本号等等浏览器发送请求的时候会把这个浏览器的信息放在http协议中一起发送到服务器上,得到相应的请求结果可以再headers中->provisional headers are shown中找到
- navigator.cookieEnabled:浏览器自动把cookie发送到服务器之中 true表示启用
- navigator.online:是否处于脱机状态
- navigator.registerContentHandler/registerProtocolHandler注册处理程序可以让一个站点知名他可以处理特定类型的消息默认使用一些在线应用程序来处理消息
History包含了浏览器窗口访问过的URL 从窗口被打开的那一刻起因为history是window对象的属性因此每个浏览器窗口每个标签页乃至每个框架都有自己的history对象该对象和特定的window对象相关联
- history.forward
- history.back
- history.go(负数往回跳正数往前跳) 也可以传递一个字符串参数此时会跳转到历史记录中包含该字符串的第一个位置可能后退也可能前进具体要看哪个位置最近如果历史记录不包含该字符串则这个方法什么也不做
```
history.go("worx.com")
//跳转到最近的worx.com页面
```
- history.screen可用的属性有width和height
- history.length保存历史记录的数量这个数量包括所有(向前和向后的)历史记录对于加载到窗口.框架中的第一个页面而言该属性值为0
Location包含了当前URL的信息都是可读可写的属性

location是最有用的bom对象之一提供了与当前窗口中加载的文档有关的信息还提供了一些导航功能

它是window对象的属性也是document对象的属性也就是说window.location和document.location引用的是同一个对象
- location.host:主机 hostname可以修改
- location.pathname:路径
- location.search:参数会显示编码之后的参数设置的时候必须加? 可以创建一个函数用来解析参数
- location.hash:锚点设置的时候必须加# 改变的时候页面不会刷新可以做单页面应用点击导航改变锚点路由监听到锚点变化会对页面做出改变而且不会刷新
- location.port:端口号
  
  以上的属性重写之后都会为url设置一个新的值页面会重新以该url加载在浏览器历史记录中生成一条新纪录用户可以通过后退回到前一个页面如果不想让用户回到跳转之前的页面要使用location.replace方法
- location.replace 这个方法不会在历史记录中生成新纪录而是用新文档代替旧文档(得到一个新的url并且会替换浏览器历史记录中当前显示页面的url) 不能回退到跳转之前的文档
- location.href:改变路径
- location.protocol:协议
- location.assign:加载新的页面资源传递一个url作为参数即可
  
  如果是将location.href或者window.location设置为一个url值也会以该值调用assign()方法
  
  下面两行代码与显式调用assign方法的效果完全一样
- location.reload:重新加载显示房钱页面参数为false或不填:可能会取缓存的文档 true从服务器重新拉取页面位于reload调用之后的diamagnetic可能会也可能不会执行取决于网络延迟或系统资源等因素最好把reload代码放在最后一行
Screen包含客户端显示屏的信息兼容性很差只用来表明客户端的能力其中包括显示器的信息如像素高度和像素宽度等这些信息集中出现在测定客户端能力的站点跟踪工具中

有可能会用到其中信息来调整浏览器窗口大小如window.resizeTo(screen.availWidth, screen.availHeight)

运行ios的设备始终返回竖着拿手机的值而安卓设备会调用screen.width和screen.height

小结

在使用框架的时候每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本每个框架都存在frames集合中可以通过位置或通过名称来访问

有一些窗口指针可以用来引用其他框架如父框架
navigator对象提供了与浏览器相关的信息具体提供哪些信息由用户浏览器决定不过也有一些公共属性userAgent存在所有浏览器中

BOM对象和方法

BOM对象和方法

什么是BOM

BOM的主要扩展

BOM的组成

BOM和DOM的关系

BOM的组成

小结

什么是`BOM`