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 也可以打开一个新窗口
接受四个参数

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

// 接收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')

第三个参数的设置选项

width
height
top
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页

BOM