第十六节: JavaScript BOM

什么是BOM

Broswer Object Model

BOM和DOM类似也是一个编程接口,这个编程接口让JavaScript有能力与浏览器对话
和DOM不同的是,DOM的核心是document,而BOM的核心是window。
在全局环境中的变量&&函数声明自动成为window的属性和值

1.window 对象的方法

window有双重角色, 其一是JavaScript访问浏览器窗口的一个接口, 其二就是ECMAScript的Global对象

1.1 window作为ECMAScript的Global对象

var age = 18;
window.sex = '男'

// 此时age, sex都是window的属性
console.log(window.age)
console.log(window.sex)

1.1 window作为JavaScript访问浏览器窗口

1. alert() 弹出一个窗口，无返回值
2. confirm() 弹出一个窗口的同时，增加了两个选择按钮，返回值为布尔值
3. prompt() 在confirm的基础上，增加了输入框供用户输入内容，返回值为用户输入的内容
4. open(‘新页面’,’打开方式’) ==>open(''//www.baidu.com'',''_blank'')
5. close() 关闭窗口
6. screenLeft, screenTop (IE, Safari, Opera, Chrome), 分别表示窗口相对于屏幕左边和上边的位置
7. screenX, screenY (Firefox) 和 screenLeft , screenTop作用一样
8. innerWidth, innerHeight, outerWidth, outerHeight, 浏览器窗口的大小
   注意, 获取浏览器浏览器窗口大小在低版本IE浏览器中使用clientWidth, clidenHeight, 但是, 不同的模式下,这个属性值是放在body, 或documentElement不同的元素上的

获取窗口大小兼容

var pageWidth = window.innerWidth, 
  pageHeight = window.innerHeight;
  
if (typeof pageWidth != "number"){
     if (document.compatMode == "CSS1Compat"){ 
        pageWidth = document.documentElement.clientWidth; 
        pageHeight = document.documentElement.clientHeight; 
    } else { 
        pageWidth = document.body.clientWidth; 
        pageHeight = document.body.clientHeight; 
    } 
}

2. location =>浏览器地址栏信息

location是最有⽤的BOM对象之⼀，它提供了与当前窗⼝中加载的⽂档 有关的信息，还提供了⼀些导航功能
注意location既是window的属性也是document的属性,引用的是同一个对象

location的好处能够将一个完整的URL解析为独立的片段
location常用的属性

1. location.href 地址栏中完整的url

2. location.protocol 地址栏的协议

3. location.hostname 地址栏的主机名

4. location.port 地址栏的端口号

5. location.host 地址栏的主机名+端口号

6. location.pathname 地址栏的路径

7. location.search 地址栏?后面的字符串

8. location.hash 地址栏#后面的字符串

9. location.reload() 重新加载,可能是缓存, 如果参数为true, 表示从服务器重新加载

3.history =>某窗口的历史页面

history对象保存着⽤户上⽹的历史记录，从窗⼝被打开的那⼀刻算起。

history.length 历史页面个数
history.back() 跳转到前一个页面
history.forward() 跳转到后一个页面
history.go(参数) 跳转到第几个页面 参数为数字 可正可负

4. navigator =>浏览器的信息

navigator.userAgent 浏览器的版本号