BOM

1 window对象

BOM 的核心对象是 window， wondow即是通过js访问浏览器窗口的一个接口，也是ES规定的global对象

1.1 全局作用域

由于window 同时扮演着ES中Global对象，因此在全局中用 var 声明的所有变量 对象 函数 都会变成window对象的属性和方法

var age = 10;
console.log(age)
console.log(window.age)
let name = 'wang'
console.log(name)
console.log(window.name) // undefined

1.2 窗口关系及框架 (暂时忽略)

如果页面中包含框架，则每个框架都有自己的window ,并且保存在frames集合中

1.3 窗口位置

用来确定和修改window对象位置的方法很多
chrome safari提供了screenLeft screenTop
firefox提供了 screenX screenY

// chrome safari:   screenLeft screenTop
// firefox  : screenX screenY
let leftPosition = window.screenLeft;
console.log(leftPosition)
// 跨浏览器获得窗口左边和上边位置
let leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
let rightPos = (typeof window.screenRight == 'number') ? window.screenRight : window.screenY;
console.log(leftPos , rightPos) 

移动窗口位置 但可能会被浏览器禁用
moveTo(x,y) 新位置的x y
moveBy() 接受在水平和垂直方向上移动的像素数

1.4 窗口大小

innerWidth
innerHeight
outerWidth
outerHeight

<!-- 会被浏览器禁用 -->
window.resizeTo()
window.resizeBy()

1.5 导航和打开窗口

window.open() 既可以导航到一个url 也可以打开一个新窗口
接受四个参数

1. 要加载的url
2. 窗口目标
3. 一个特性字符串
4. 表示新页面是否取代浏览器历史记录中当前加载页面的布尔值 只在不打开新窗口的情况下使用

// 接收4个参数 url 目标窗口 一个特性字符串 一个表示新页面是否取代历史记录中加载当前页面的布尔值
window.open('https://developers.weixin.qq.com/community/develop/article/doc/0006e6cd640f302b595a55f9656413' , 'toFrame')
// 等同于 <a href="" target="toFrame"></a>
// 如果有一个名为"toFrame"的窗口或框架，那就在toFrame这个窗口打开url，否则就新建一个名为toframe的窗口打开url
    // 第三个参数是一个逗号分隔的字符串，表示新的窗口有哪些特性
window.open('https://developers.weixin.qq.com/community/develop/article/doc/0006e6cd640f302b595a55f9656413' , 'toFrame' , 'height=400')

第三个参数的设置选项

1. width
2. height
3. top
4. status yes/no 表示是否在浏览器窗口中现视状态栏
   .
   .
   .
   等等

调用close()可以打开新创建的窗口

// close关闭新打开的窗口  仅仅能关闭新打开的窗口
let myWin = window.open('https://developers.weixin.qq.com/community/develop/article/doc/0006e6cd640f302b595a55f9656413' , 
    'newFrame' , 'width=100 , status=yes'
)
setTimeout(()=>{
    myWin.close() // 关闭窗口
} , 1000)

1.6 间歇调用 和 超市调用

超时调用即调用 window对象的 settimeout()方法 他接受两个参数 要执行的代码 以及 等待的毫秒数

// setTimeout() 返回的是一个id 
let timeID = setTimeout(()=>{ console.log('sss') } , 100) // 这个id是超时调用的唯一标识符，可以通过它来取消超时调用
console.log(timeID)  // 1
let timeID2 = setTimeout(()=>{ console.log('sss222222') } , 100)
console.log(timeID2) // 2
clearTimeout(timeID2)  // 取消超时调用  由于在100ms取消了超时调用 所以不会打印 'sss222222'
console.log(timeID2) // 2

超时调用的代码都是在全局作用域中执行的 因此在非严格模式中，超时调用函数里的this指向window,严格模式下是undefined

间歇调用与超时调用类似，不过它会按指定时间间隔重复执行代码，直到间歇调用被取消或页面被卸载

// 间歇调用
let num = 0;
let timeInterval = setInterval(() => {
    num ++;
    if(num >= 100){
        clearInterval(timeInterval)  // 取消间歇调用
        console.log('end')
    }
}, 1);

一般会用超时调用模拟间歇调用
因为使用超时调用时，每次执行代码后，如果不再设置另一次超时调用，调用就会自动停止

1.7 系统对话框

alert()
confirm()
propt()

2 location

location是最有用的BOM对象之一
location既是window的属性也是document的属性
换句话说 window.location 和document.location指向的是同一个对象

下面列出了location对象的所有属性
console.log(location.href)
url= ‘http://www.baidu.com:80?’
hash 返回url中的hash (#号后跟零或多个字符)
host 服务器名称和端口号
hostName 服务器名称
href 完整url
pathName 返回url中的目录和文件名
port 端口号
protocol 协议 http https等
search 返回url的查询字符串 ‘?q=java’

3 navigator对象

用来识别客户端浏览器的一些信息
appCodeName 浏览器的名称 通常都是mozilla 即使不是mozilla浏览器也是如此
language 浏览器的主语言
plugins 浏览器中安装的插件数组
cookieEnabled cookie是否启用
等等

console.log(navigator.userAgent)  // Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36
console.log(navigator.appCodeName)  // Mozilla
console.log(navigator.plugins)      // 
console.log(navigator.cookieEnabled) //true

4 screen对象

用来表明客户端的能力
height 屏幕的像素高度
left 当前屏幕据左边的像素距离

5 history

history保存着用户上网的记录
history 是window的对象属性，因此每个浏览器窗口 标签页 乃至每个框架 都有自己的history对象与特定的window对象管理
出于安全考虑，开发人员无法获取具体url，但可以实现页面的前进后退

    history.forward(); //前进1页
    history.back(); //后退1页

    history.go(-1) // 后退1页
    history.go(1) // 前进1页
    history.go(2) // 前进2页

6 小结