红宝书笔记——JavaScript BOM

window对象

在全局作用域中声明的变量、函数都会变成window对象的属性和方法。全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。

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;
delete window.color;
alert(window.age);//29
alert(window.color);//undefined

可见全局变量age不可以删除，在window对象上的属性color可以被删除掉。

窗口位置

screenLeft 和 screenTop 属性：用来表示窗口相对于屏幕左边和上边的位置。
screenX 和 screenY 属性：提供相同的窗口位置信息。
但两者支持的浏览器不同。下面的代码可以跨浏览器取得窗口左边和上边的位置。

var leftPos=(typeof window.screenLeft=='number')?window.screenLeft:window.screenX;
var topPos=(typeof window.screenTop=='number')?window.screenTop:window.screenY;
document.write(leftPos+"  "+topPos);

全屏的情况下值为0 0。
moveTo()和moveBy() 是将窗口移动到一个新位置。
moveTo() 接受的是新位置的x和y坐标值，而moveBy() 接受的是在水平和垂直方向上移动的像素数。 但是现在很多浏览器已经禁用了。

窗口大小

outerWidth和outerHeight返回浏览器窗口本身的尺寸；
innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。
不同的浏览器支持的窗口大小的表示方式不同,因此也需要考虑浏览器兼容性。

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.write(pageWidth+"   "+pageHeight);

resizeTo() 和 resizeBy() 方法可以调整浏览器窗口的大小。
resizeTo()接受的是窗口的新宽度和新高度，而resizeBy() 接受的是新窗口与原窗口的宽度和高度之差。不过现在有些浏览器也是禁用了的。

导航和打开窗口

window.open() 方法可以接收四个参数：要加载的url，窗口目标，一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。第二个参数可以是：_self,_blank,_parent,_top。第三个参数可以是窗口的一些特性，例如width，height等等。
window.open(" ",'myWin','width=200,height=200,top=100,left=50'); window.close() 方法用来关闭窗口。 检验弹出窗口是否被屏蔽：

var bloked=false;
try{
    var wroxWin=window.open("http://www.baidu.com",'_blank');
    if(wroxWin==null){
        bloked=true;
    }
}catch(ex){
    bloked=true;
}
if(bloked){
    alert("The popup was bloked!");
}

间歇调用和超时调用

setTimeout() 方法接受两个参数：要执行的代码和以毫秒表示的时间。
clearTimeout() 方法是取消超时调用。

var oBtn=document.getElementById('btn');
var timeoutId=setTimeout(function(){
    alert("hello!");
},1000);
clearTimeout(timeoutId);

设置间歇调用的方法是setInterval()。它接受的参数也是：要执行的代码和以毫秒表示的时间。

var num=0;
var max=10;
var intervalId=null;
function incrementNumber(){
    num++;
    if(num==max){
        clearInterval(intervalId);
        alert("Done!");
    }
}
intervalId=setInterval(incrementNumber,1000);
var num=0;
var max=10;
function incrementNumber(){
    num++;
    if(num<max){
        setTimeout(incrementNumber,1000);
    }else{
        alert("Done!");
    }
}
setTimeout(incrementNumber,1000);

这两种表达方式的效果都是一样的。不过最好不要使用间歇调用。

系统对话框

alert(),confirm(),prompt()方法可以调用系统对话框向用户显示信息。

var result=prompt("What is your name?");
if(result){
    alert("welcome,"+result);//welcome,...
}

location对象

查询字符串参数，在开发的时候经常用到。

function getQueryStringArgs(){
  //取得查询字符串并去掉开头的问号
  var qs=(location.search.length >0?location.search.substring(1)：'');
  //保存数据的对象
  arg={};
  var items=qs.length?qs.split('&'):[],
      item=null,
      name=null,
      //在for循环中使用
      i=0,
      len=items.length;
  //逐个将每一项添加到args对象中
  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;
}

例如：要查询的字符串是?q=javascript&num=10

var args=getQueryStringArgs();
alert(args["q"]);//javascript
alert(args["num"]);//10

位置操作

location.assign("http://www.baidu.com");
window.location="http://www.baidu.com";
location.href="http://www.baidu.com";
这三种表达方式效果都是一样，打开百度的网页。
另外修改location的hash,search,hostname,pathname,port属性可以改变当前加载的页面。
假设初始的URL为http://www.baidu.com/win/
//修改为：http://www.baidu.com/win/#section1
location.hash = “#section1”;
//修改为：http://www.baidu.com/win/?q=JavaScript
location.search = “?q=javascript”;
//修改为：http://www.yahoo.com/win/
location.hostname = “www.yahoo.com”
//修改为：http://www.baidu.com/win/mydir
location.pathname = “mydir”
//修改为：http://www.baidu.com:8080/win/
location.port = “8080”

replace()函数在设置URL方面与location的href属性或assign函数完全一样，但是它会删除history对象的地址列表中的URL，从而使Go或back等函数无法导航。
reload()函数是用于重新加载当前显示的页面。一般最好将reload() 放在代码的最后一行。

history对象

history() 中使用最常的就是go()方法。
后退一页：history.go(-1)
前进一页：history.go(1)
前进两页：history.go(2)
也可以指定网页跳转：history.go(“url”),后退：history().back(),前进：history.forward()。