javascrit BOM 浏览器对象模型

javascrit BOM 浏览器对象模型

❝

BOM是browser object model的缩写,简称浏览器对象模型.

❞

---

window 对象

❝

由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window。

表示浏览器的一个实例，window对象有双重角色。即是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

意味着在网页中定义的任何一个对象、变量和函数，都是以window作为其Global对象。

**全局作用域：**在全局作用域声明的变量、函数都会变成window对象的属性和方法。

「窗口的位置：」window.screenLeft和window.screenTop表示串口相对屏幕左边和上边的位置

「窗口大小：」

• window.innerHeight、window.innerWidth 返回浏览器视口容器的大小
• window.outerHeight、window.outerWidth 返回浏览器窗口本身的尺寸

「定时器：」

• 「setTimeout()」
• 「setInterval()」

❞

---

location 对象

❝

提供当前窗口中加载的文档有关信息，还提供了一些导航功能。

特别的对象：即是window对象的属性，也是document对象的属性。

即window.location和document.location引用的是同一个对象。

location对象会将URL解析成独立的片段。

❞

# 查询字符串参数
var getQueryStr= function(){
  var qs = location.search.length > 0 ? location.search.substring(1) : '',
    args = {},
      items = qs.length ? qs.split("&") : [],
      item = null,
      name = null,
      value = null,
      i = 0,
      len = items.length;
  for(i=0;i<len;i++){
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
  if(name.length){
      args[name] = value
    }
  }
  return args;
}
# 根据指定的参数名查找值
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
  if (r != null) return unescape(r[2]);
  return null;
}

Location.assign() 方法会触发窗口加载并显示指定的URL的内容

Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。

Location.replace() 方法以给定的URL来替换当前的资源。 与assign() 方法 不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中（session History），这样，用户点击回退按钮时，将不会再跳转到该页面。

---

navigator 对象

❝

最早是由 Netscape Navigator 2.0 引入的navigator对象。现在已经成为识别客户端浏览器的事实标准。

ua-parser-js

❞

function isMobile() {
  var ua = window.navigator.userAgent;
  if (!/\b(Windows\sNT|Macintosh|Linux)\b/.test(ua) || /mobile|android/i.test(ua)) {
    return true;
  } else {
    return false;
  }
}

---

history 对象

❝

history 对象保存着用户上网的历史记录，每个浏览器窗口、每个标签页，乃至每个框架都有自己的history对象。

go()方法可以在用户的上午记录中任意的跳转。

history.go(-1) // 后退一页
history.go(1) // 前进一页
history.go(2) // 前进2页

❞

---

screen 对象

❝

screen 对象表明客户端的能力，包括浏览器窗口外部的显示器信息，如像素、宽度、高度等等。

❞

本文使用 mdnice 排版