JavaScript - BOM

JavaScript - BOM(浏览器对象模型)

• window 对象（ BOM的核心对象是浏览器的一个实例）
  
  • 全局作用域

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

 - 在全局作用域中声明的全部局变量或者方法会被自动归到window对象的属性下，但是与直接在window对象下定义属性还是有差别的

var name = 29;
          window.color = 'red';
         delete window.name; //IE < 9 抛出错误，其他返回false
         delete window.color;  //IE < 9 抛出错误， 其他返回true
         alert(window.name);
         alert(window.color);

 - 窗口位置
     - IE, Safari, Opera, Chrome : screenLeft, screenTop,  Firefox: screenX, screenY

//跨浏览器取得窗口上边和左边的位置
function getBowerPosition() {
    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    var topPos = (typeof  window.screenTop == "number") ? window.screenTop : window.screenY;
    alert("left = " + leftPos + ", top = " + topPos);
}

moveTo(x, y) :  接收新位置的x和y值坐标
moveBy(x, y) : 接收窗口在水平和垂直方向上平移的左边值

• 窗口的大小
  IE, Safari, Opera, Chrome： innerHeight, innerWidt
  h, outerHeight, outerWidth, IE, Safari, Oper中outerWidth/outerHeight返回浏览器窗口本身的尺寸， Chrome： 四个都返回viewport(视口）大小
  标准模式下获取窗口大小： document.documentElement.clientWidth
  混杂模式下： document.body.clientWidth（ie6）

//跨浏览器获取视图的大小
getBowerSize();
function getBowerSize() {
    var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;
    if (typeof pageWidth != "number") {
        if (document.compatMode == "CSS1Compat") {
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientWidth;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }
    alert("pageWidth = " + pageWidth + ", pageHeight = " + pageHeight);
}

resizeTo(x, y): 新窗口的新高度和新宽度
resizeBy(x, y): 新窗口与原窗口的高度和宽度之差

• 导航和打开新窗口：window.open()方法既可以打开一个新的窗口又可以导航到一个特定的url

//模拟浏览器下载
function downloadBower(downloadUrl) {
    window.open(downloadUrl, '_blank');
}

• 间歇调用与延时调用：
  
  • 延时调用： 在延时指定的毫秒数之后执行指定的代码， 但可能代码不会立即执行，因为javascript是一个单线程， 在指定的毫秒数之后，会将延时后执行的函数体添加到js的任务队列，如果队列为空就会立即执行，但如果不是就会等待之前的任务队列执行完后才会执行

setTimeout(function () {
    //延时后执行的函数体
}, 10000);
//取消延时操作（在指定毫秒数之前调用会取消）;
var timeoutId = setTimeout( function() {
    //函数体
}, 1000);
clearTimeout(timeoutId);

• 间歇调用：setInterval

var intervalId = setInterval( function() {
    //函数体
}, 1000);
clearInterval(intervalId );