Web API 学习笔记 03

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

​ BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

​ BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

DOM和BOM比较

BOM比DOM更大，它包含DOM
DOM：

• 文档对象模型。把文档当成对象
• 主要对象是document
• 主要用来对页面元素进行操作
• DOM是W3C标准规范

BOM：

• 浏览器对象模型，把浏览器当成一个对象
• 顶级对象是window
• 主要学习与浏览器窗口进行交互的一些对象
• 是各个浏览器厂商在各自浏览器上定义的，兼容性较差

顶级对象window

• window是浏览器顶级对象，是JS访问浏览器窗口的一个接口；
• 它是一个全局对象，定义在全局作用域中的变量和函数都会称为window对象的属性和方法。调用的时候可以省略window。
  比如：alert(),prompt() ,其实是window.alert(), window.prompt()省略了window

window对象常用的事件

load页面加载事件

• window.onload = function() {} 整个页面全部加载完成调用函数，包括页面元素，图片，css等，有了onload事件，就可以把js代码写在元素上面。
• window.addEventListener(‘load’ , function(){}); onload事件另一种写法
• window.addEventListener(‘DomContentLoaded’ , function(){}); 跟上面两种不同的是，只是等页面元素加载完成就调用，不需要等图片，样式css等全部加载完。 IE9+支持

resize窗口大小改变事件

• window.onresize = function(){}
• window.addEventListener(‘resize’, function() {})
• window.innerWidth 属性可以获取窗口宽度

定时器

window对象中有两个方法，实现定时器的功能

• window.setTimeout(function(){} , 延迟的毫秒数) 延迟一定时间去执行回调函数
• window.setInterval (function(){} , 延迟的毫秒数) 每隔一定时间就执行一次回调函数

通常用变量作为定时器的标识，因为页面中通常有多个定时器
比如：var timer = window.setTimeout(fn, 延迟毫秒数)
注意，回调函数如果不是匿名函数，可以直接写函数名，也可以写一个字符串‘函数名（）’，但不提倡。

注意：window可以省略不写

清除定时器：

• window.clearTimeout(timerID)
• window.clearInterval(timeID) window可以省略不写

lacation对象

window.location是window对象的一个属性，它是一个对象
location对象常用的属性和方法：

• location.href：获取、设置整个url地址
• location.search：获取url中的参数
• location.host：获取主机域名
• location.port：获取端口号
• location.pathname：文件、页面路径
• location.hash：片段 #后面的内容 常见于链接锚点
• location.assign(‘重定向页面的url’) 页面跳转，记录历史
• location.replace(‘url’) 替换当前页面，不记录历史，不能返回
• location.reload() 重新加载页面，刷新，参数为true就是强制刷新

navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

• history.back() 后退
• history.forward() 前进
• history.go(参数) 前进后退，参数为1前进一个页面，-1后退一个页面