【BOM】知识简记与速查

BOM

---

浏览器对象模型

• 他提供里独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
• BOM 缺乏标准，兼容性比较差
• DOM是把文档看成对象，顶级为document，BOM是把浏览器看成对象,顶级为window
• BOM是一个全局对象，定义在JS中的全部全局变量都会变成window对象的属性和方法，在调用的时候可以省略掉window.
• 它是js访问文档的一个借口

---

窗口加载事件

• window.onload = function() {}
• 或者
• window.addEventListener(‘load’,function(){});
• 如果你喜欢把js写在代码的前面或外面，普通的写可能这些js不会生效，因为网页是从上往下读并执行的，利用加载就可以解决这个问题了
• window.onload 传统注册事件只能写一次，若有多个则以最后一个事件生效，addeventlistener没有限制
  
  
• document.addEventListener(“DOMCententLoad”,function(){})
• 如果页面里有很多图片，从用户访问到onload触发可能需要较长的时间，交互就不能实现，影响用户体验，此时用该事件就比较合适
• 该事件与window.load的区别：该事件只检测且仅检测文档内的标签有没有加载完毕，加载完毕标签即可执行，前者则是加载完整个文档才执行

---

窗口大小事件

• window.onsize()=function(){}
• window.addEventListener(“resize”,function(){})
• 经常利用该事件来完成响应式页面布局 window.innerWidth <= 600px 时，触发你想比如隐藏某标签

---

定时器

• setTimeout() 设置一个定时器，计时结束后执行函数 毫秒数
• 设置一个定时器，延时时间单位是毫秒 但是可以省略，如果省略默认的是0， 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’， 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
• 示例 var time = setTimeout(func,3000);
• 或 var time = setTimeout(‘func()’,3000);
  
  
• setInterval() 可以把这个函数看成setTimeout()的循环回调，把setTimeout看成单次回调函数

---

location对象

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

• 获取URL参数 点击查看示例

1. 第一个登陆页面里面有提交表单，action将文本框内的内容提交到了index2.html的页面

2. 第二个页面可以接受并使用由其他页面传递过来的参数

3. 第二个页面之所以可以使用传递过来的值是因为利用了URL里面的 location.search 参数
   比如 https://www.baidu.com/s?ie=UTF-8&wd=参数
   上面的链接中的 ?ie=UTF-8&wd=%E5%8F%82%E6%95%B0
   就是传递值，问号后面的内容 ie=UTF-8&wd=%E5%8F%82%E6%95%B0
   则是真正我们需要用到的参数值

4. 但是这个参数传递的时候会附带一些我们不需要的内容，这时候我们就要对参数进行提取
   (1) 第一步，把传过来的参数中的‘？’去掉，利用substr(‘起始的位置’，截取的字符长度);
   substr()中可以填两个参数，不同的参数用逗号隔开，第一个参数为字符串的截取起始位置，数组下标；第二个参数是截取的最终位置，数组下标，不填则默认为截取到最后
   (2) 利用=把字符串分割为数组 split(’=’);
   (3) 把数据写入div中,利用innerHTML

• 其他的location参数：
  assign() 载入一个新的文档，又叫重定向
  reload() 重新载入当前文档，相当于强制刷新，重新加载
  replace() 用新的文档替换当前文档，因为不记录历史，因此不能使用回退键

---

navigator 对象

Navigator 对象包含有关浏览器的信息。

Note注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法	描述
javaEnabled()	指定是否在浏览器中启用Java
taintEnabled()	规定浏览器是否启用数据污点(data tainting)

• 检测用户的设备并返回，根据设备型号将网页指向新的页面可以利用以下代码

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 = "../H5/index.html";
}

---

History 对象

• History 对象包含用户（在浏览器窗口中）访问过的 URL。

• History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

• 注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面