浏览器对象模型BOM

---

windows

BOM的核心对象，表示浏览器的一个实例，既是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的global对象。

1.全局作用域

全局变量不能通过delete操作符删除，windows对象的属性可以（IE9以下的会抛出错误）

2.窗口关系及框架

如果页面中包含框架，则每个框架拥有自己的window对象，并且保存在frame集合中。每个window对象都有一个name属性，包含框架的名称（除非最高层窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值）。框架的访问方式：window.frames[i]/top.frames[i]/frames[i]或window.frames[‘name值’]/top.frames[‘name值’]/frames[‘name值’]

• top对象：始终指向最高层框架；
• parent对象：指向当前框架的直接上层框架；
• s**elf对象**：始终指向window，两者可以互换使用。
  这些都是window对象的属性

注：每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。

3.窗口位置

跨浏览器获取窗口左边和上边到屏幕的位置：

// 由于Firefox、Safari、Chrome始终返回的是每个框架的top.screenX/Y，当窗口被设置有外边距的时候，会出现问题
var leftPos = (typeof window.screenLeft=='number' ? window.screenLeft : window.screenX);
var topPos = (typeof window.screenTop=='number' ? window.screenTop : window.screenY);

---

4. 窗口大小

//页面可视区宽高
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != 'number'){
    if(document.compatMode == 'CSS1Compat'){
        pageWidth = document.documentElement.clientWidth 
        pageHeight = document.documentElement.clientHeight
    }else{
        pageWidth = document.body.clientWidth 
        pageHeight = document.body.clientHeight
    }
}

//内容宽高(包括边线和滚动条的宽)
document.body.offsetWidth 
document.body.offsetHeight 

//滚动条滚动的距离
document.body.scrollTop||document.documentElement.scrollTop;
document.body.scrollLeft||document.documentElement.scrollLeft;

//内容实际宽高（包括隐藏部分）
document.body.scrollWidth
document.body.scrollHeight

注意：移动设备更加复杂

浏览器窗口事件

• window.onresize : 窗口大小改变时触发；
• window.scroll：窗口滚动条滚动时触发。

---

5. 导航和打开窗口

window.open(url，窗口目标，一个设置新窗口特性的字符串，布尔值->新页面是否取代浏览器历史记录中当前加载页面)
window.close()： 关闭window.open()打开的窗口；
top.close()：弹出窗口关闭自己；
浏览器的主窗口，没有用户的允许不能关闭。

---

location对象

它既是window对象的属性，也是document对象的属性。

属性	说明
hash	字符串，返回url中的hash
href	字符串，返回当前加载页面的完整url
search	字符串，返回url的查询字符串，以？开头

---

1.查询字符串

function getQueryStringArgs(){
    // 获取查询字符串并除去开头的问号
    var qs = location.search.length>0 ? location.search.substring(1):'';
    if(!qs){
        return ""
    }
    var args,arr = qs.split('&');
    for (var i = 0; i <  arr.length; i++) {
        var itemArr = arr[i].split('=');
        var name = decodeURIComponent(itemArr[0]);
        var value = decodeURIComponent(itemArr[1]);
        args[name] = value;
    }
    return args;
}

function getQuery(name){
　  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r =window.location.search.substr(1).match(reg);//从?之后开始匹配如getQuery(courseid)返回一个数组["courseid=8","","8","&",index:0,input:"courseid=8"]
    return r ? decodeURIComponent(r[2]):null;
}

---

2. 位置操作

location.assign(url)：打开新的url并生成历史记录
每次修改location的属性（search，hostname，pathname，port，除hash），页面都会一新的url重新加载。并且有后退功能。
loction.replace(url)：打开新的url，没有后退功能。
loction.reload()：重新加载（可能从缓存中加载）
loction.reload(true)：重新加载（从服务器加载）

---

navigator对象

识别客户端浏览器的标准

检测插件

非IE浏览器中，plugins数组（每个元素具有name，description，filename，length四个属性）
IE浏览器中，以COM标示符来检查的

//非IE
 function hasPlugin (name) {
     name = name.toLowerCase();
     for (var i = 0; i < navigator.plugins.length; i++) {
         if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
             return true;
         }
     }
     return false;
 }

//IE
 function hasIEPlugin (name) {
     try {
         new ActiveXObject(name);
         return true;
     } catch (ex) {
         return false;
     }
 }

---

screen对象

表明客户端的能力，不常用

---

history对象

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

history.go(1) //前进一页

history.go(2) //前进两页

history.go(url) //跳转到历史记录包含该字符串的第一个位置，如果历史记录不包含改url则什么也不做。

history.length //历史记录的数量