BOM 浏览器对象模型

BOM 浏览器对象模型

BOM对象

• BOM对象在浏览器中作为window对象的属性保存的
• 可以通过window对象来使用(如window.navigator)，也可以直接使用(如navigator)

window

• 代表的是整个浏览器的窗口、同时window也是网页中的全局对象
• window.onresize:当调整window窗口大小的时候，就触发window.onresize事件，调用处理函数
• decodeURIComponent()：是JavaScript中的解码函数

Navigation

• 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器

• 常用属性：
  userAgent,这个属性是一个字符，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

• Chrome的userAgent:
  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
  new演示文件.html:53 Live reload enabled.

• 火狐浏览器没下载

• IE8的userAgent:
  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

• IE9:
  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

• IE11：
  Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

• 在IE11中微软已经将IE相关的标识都已经去除了，所以已经不能通过UserAgent来识别一个浏览器是否IE了

• 如果通过UserAgent不能判断IE浏览器，还可以通过一些浏览器特有的对象，来判断浏览器的信息，比如：ActiveXOject

• 判断不同浏览器代码

    var ua = navigator.userAgent;
    if (/firefox/i.test(ua)) {
      console.log("火狐浏览器！");
    } else if (/chrome/i.test(ua)) {
      console.log("chrome浏览器！");
    }else if(/mise/i.test(ua)){
      console.log("IE浏览器！");
    }else if("ActiveXObject" in window)
    {
      console.log("IE11浏览器！");
    }

• platform:运行浏览器的操作系统

Location

• 代表浏览器的地址信息，通过Location可以获取到地址栏信息，或者浏览器跳转页面

• 如果直接打印location,则可以获取到地址栏的信息（当前页面的完整路径）

• 如果直接将location属性修改为一个完整的路径，或者相对路径，则页面会自动跳转到该路径，并且会生成相应的历史记录
  *常用属性：

  (1)location.search：返回当前URL的查询部分。即’?'号之后的部分

  (2)location.hash：返回URL中’#'开始的内容

  (3)location.host：返回URL中的主机名和端口号

  (4)location.hostname：返回URL中的主机名和端口号

  (5)location.href：返回完整的URL

  (6)location.pathname:返回路径名

  (7)location.port：返回端口号

  (8)location.protocol：返回网络协议

• location.assign():用来跳转到其他的页面，作用和直接修改location一样

• location.reload():重新加载当前页面，作用和刷新界面按钮一样
  如果在方法中传递一个true作为参数，则会强制晴空缓存刷新页面

• location.replace():可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
  不会生成历史记录，不能使用回退按钮回退

History

• 代表浏览器的历史记录，可以通过对象来操作浏览器的历史记录
• 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页，而且该操作只在当次访问时有效
• history.length属性:可以获取到当前访问的链接数量
• history.back():可以用来回退到上一个页面，作用和浏览器的回退按钮一样
• history.forward():可以跳转下一个页面。作用和浏览器的前进按钮一样
• history.go():可以用来跳转到指定的页面
  他需要一个整数作为参数
  1：表示向前跳转一个页面 相当于forward()
  2：表示向前跳转两个页面
  -1：表示向后跳转一个页面 相当于back()
  -2：表示向后跳转两个页面

Screen

• 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息