BOM(浏览器对象模型)

window对象

1、全局作用域

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age); //29
sayAge();         //29
window.sayAge();  //29

 

在全局作用域中定义一个变量age和一个函数sayAge(),它们会自动归在window对象名下。

var age = 29;
window.color = 'red';

delete window.age; //在ie<9时抛出错误，在其他浏览器返回false
delete window.color; //在ie<9时抛出错误，在其他浏览器返回true

 

使用var语句添加的window属性有一个名为[[Configurable]]（表示能否通过delete删除属性）的特性，这个特性的值被设置为false,一旦把该属性定义为false之后，那么除了writable之外，其他所有的属性都无法再修改。因此这样定义的属性不可以通过delete操作符删除，ie8及更早版本在遇到使用delete删除window属性的语句时，不管该属性最初时如何创建的，都会抛出错误

var newValue = oldValue; //这里会抛出错误，因为oldValue未定义
var newValue = window.oldValue; //这里不会抛出错误，因为这是一次属性查询

 

尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

2、窗口位置

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

 

ie,safari,opera,chrome都提供了screenLeft和screeTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。firefox则在screenX和screenY属性中提供相同的窗口位置信息,
safari和chrome也同时支持这两个属性，但是与screenLeft和screenTop的值并不对应，因此建议在safari和chrome不要使用

3、窗口大小

var pageWidth = window.innerWidth(),
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.boyd.clientHeight;
    }
}

 

我们无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。 ie9+,firefox,safari,opera,chrome:支持innerWidth,innerHeight,outerWidth,outerHeight。但是chrome中outerWidth = innerWidth;

移动ie浏览器不支持window.inenrWidth,window.innerHeight。但通过document.documentElement.clientWidth可以获取

location对象

loction对象是很特别的一个对象，因为它既是window对席那个，也是document对象的属性。换句话说,window.location和document.location引用的是同一个对象
host: #jygl 返回url的hash(＃号后跟零或多个字符)
search: ?q=1 返回url的查询字符串。这个字符串以问号开头
查询字符串

function getQueryStringArgs(){
    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.lenght;
    
    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;
}

var args = getQueryStringArgs();
alert(args['q']); //1

 

history对象

后退一页
history.go(-1);
history.back()

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

//前进两夜
history.go(2);

 

也可以给go()传递一个字符串参数，此时浏览器会跳转到历史纪录中包含该字符串中的第一个位置，可能会后退，也可能会前进，具体看哪个位置最近

//跳转到最近的wrox.com页面
history.go('wrox.com');