Bom及Bom对象的详细介绍

一. 什么是BOM:

• BOM学名: Browser Object Model 翻译为 浏览器 对象 模型。 其实就是专门操作浏览器窗口的一组对象和函数
• 如果想操作浏览器窗口或访问浏览器软件的信息，就用BOM。 比如: 打开和关闭窗口，鉴别浏览器名称和版本号等
• 问题: BOM没有标准，有严重的兼容性问题。
• 包括以下主要对象: window; history; location; navigator; document; screen; event

二. window对象

三个角色:

• 代替ECMAScript中的global充当全局作用域对象var a=3; 结果变量a会保存在window中。parseInt，其实也可以是window.parseInt
• 包含所有DOM，BOM的原生函数和对象。 document对象，其实保存在window.document。alert()其实是window.alert()
• 代表当前窗口——可获得当前窗口的大小： 2组：
  1)：完整窗口大小: outerWidth和outerHeight
  2)：文档显示区窗口大小: innerWidth,innerHeight
  3)：文档显示区: 浏览器中专门显示网页的那部分白色区域
  4)：可以打开和关闭窗口
  window.open() 可打开一个新窗口
  window.close() 可关闭一个窗口

三. 打开窗口:

• 在当前窗口打开新链接，可后退:
  (1). html中: <a href="url" target="_self">
  (2). js中: window.open("url", "_self")

• 在当前窗口打开新链接，禁止后退:
  (1). 只能用js做: location.replace(“新url”)

• 在新窗口打开新链接，可打开多个:
  (1). html中: <a href="url" target="_blank">
  (2). js中: window.open("url", "_blank")

• 在新窗口打开新链接，只能打开一个:
  (1). html中: <a href="url" target="blank">
  (2). js中: window.open("url", "blank")
  原理：
  其实浏览器中每个窗口在内存中都有一个唯一的名称
  浏览器规定，相同名称的窗口，只能出现一个。后出现的窗口会把先出现的窗口覆盖掉。
  在打开窗口跳转页面时，可以给新窗口指定不同窗口名，实现不同的打开窗口的效果。其实a元素的target属性值，就是要给新窗口的名称。
  window.open()的第二个参数值，也是要给新窗口的名称
  新窗口中可用window.name属性接住上个页面传过来的窗口名。window.name属性是BOM内置的关键词，所以我们自己起变量名时，不要用"name"。
  可实现以下三种效果:

  1. 在新窗口打开新链接，只能打开一个
     <a href="url" target="自定义新窗口名">
window.open("url", "自定义新窗口名" )
  2. 在新窗口打开新链接，可打开多个:
     <a href="url" target="_blank">
window.open("url", "_blank" )
     因为_blank是内置窗口名，表示不指定窗口名，而是让浏览器随机分配窗口名(看不见)。之后打开的窗口名，没有重复，所以可以打开多个窗口。
  3. 在当前窗口打开，可后退:
     <a href="url" target="_self">
window.open("url", "_self" )
     因为_self也是内置窗口名，表示用当前窗口自己的名称作为新窗口的名称，结果，新窗口会覆盖当前窗口

四. history:

• 什么是: 当前窗口内存中保存当前窗口打开后，成功访问过得url的历史记录数组。
• 掌管着前进和后退:
  (1). 当当前窗口打开一个新地址后，就会将新地址push()到history中。
  (2). 默认浏览器始终显示最新的url
  (3). 能否前进或后退，取决于浏览器正在显示哪一条url的网页，以及这条url历史记录前后，是否有其他历史url存在。如果有，就可以前进或后退
• 如何用程序前进后退:
  (1). history.go(1) 前进1步
  (2). history.go(-1) 后退1步，如果后端一步不管用，可history.go(-2)
  (3). history.go(0) 刷新

五. location

• 什么是: 保存地址栏中地址信息，并提供跳转函数的对象
• 何时: 只要希望获得url中的信息，或执行页面跳转或刷新功能时
• 如何使用:
  (1). 属性:
  1 location.href 完整的url
  2 location.protocol 协议
  3 location.host 主机名+端口号
  4 location.hostname 主机名
  5 location.port 端口号
  6 location.pathname 相对路径
  7 location.search ?及其之后的查询字符串
  8 location.hash 锚点地址
  (2). 方法:
  1 在当前窗口打开，可后退:
  loction.href="新url" 立刻跳转，也可以: location="新url" 或 location.assign("新url")
  2 在当前窗口打开，禁止后退:
  location.replace("新url")
  3 刷新页面: 2种:
  1). 普通刷新: 优先从浏览器本地缓存中获取资源。除非本地缓存中的资源不存在或过期，才从服务器下载新资源
  history.go(0) 和 location.reload()
  2). 强制刷新: 无论缓存中是否有需要的资源文件，都要重新从服务器下载资源。
  location.reload(true) //强迫

六. navigator

• navigator是保存浏览器配置信息的对象
• 何时使用: 查看浏览器软件的配置信息， 判断浏览器的名称和版本号。
  (1). navigator.userAgent: 保存浏览器名称和版本号的字符串
  (2). 如何根据userAgent判断当前浏览器的名称和版本号(我上篇文章说过了)

有问题欢迎交流，个人博客