js bom window对象

一、全局作用域

我们全局作用域定义了一个变量name，window对象下也能访问，证明在全局作用域下定义的变量，会自动纳入window对象。

var name = "Bob";

console.log(name); // Bob
console.log(window.name); // Bob

未声明的变量不能使用，并且会抛出未定义错误提示，但window下寻找未定义的变量，会抛出undefined，因为window对象查询是对象的一次查询属性。

console.log(age); // ReferenceError: age is not defined
console.log(window.age); // undefined

二、窗口位置

IE,Safari,Opera, Chome 都提供了screenLeft和screenTop属性，分别表示对窗口相对于屏幕的左边和上边的位置。

// 窗口位置
let leftPos = (typeof window.screenLeft === 'number') ?
    window.screenLeft : window.screenX;

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

console.log(leftPos, topPos);

这个例子运用二元操作符首先确定screenLeft和screenTop属性是否存在，如果是（在IE、Safari、Opera和Chrome中），则取得这两个属性的值。如果不存在（在Firefox中），则取得screenX和screenY的值。

三、窗口移动

需要注意的是，这两个方法可能会被浏览器禁用；而且，在Opera和IE 7（及更高版本）中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的window对象使用。

moveTo()和moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和 y坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数

//将窗口移动到屏幕左上角
window.moveTo(0,0);

//将窗向下移动100像素
window.moveBy(0,100);

//将窗口移动到(200,300)
window.moveTo(200,300);

//将窗口向左移动50像素
window.moveBy(-50,0);

四、窗口大小

let pageWidth = window.outerWidth,
    pageHeight = window.outerHeight;

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;
    }
}

console.log('pageWidth, pageHeight: ', pageWidth, pageHeight);

在以上代码中，我们首先将window.innerWidth和window.innerHeight的值分别赋给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；如果不是，则通过检查document.compatMode（这个属性将在第10章全面讨论）来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

// 调整浏览器窗口的大小
// resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差

//调整到100×100
window.resizeTo(100, 100);

//调整到200×150
window.resizeBy(100, 50);

//调整到 300×300
window.resizeTo(300, 300);

五、导航和打开窗口

使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口

// _self、_parent、_top或_blank。
window.open('https://baidu.com', '_blank');

// 等于
< a href="https://baidu.com" target="_blank"></a>

// 打开窗口再关闭
var wroxWin = window.open("http://www.baidu.com/", "wroxWindow",
    "height=400,width=400,top=10,left=10,resizable=yes");


setTimeout(() => {
    wroxWin.close();
    console.log('end..');
}, 5000);

六、系统对话框

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息

alert

alert("Hello world!")

confirm

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure! ");
} else {
    alert("I'm sorry to hear you're not sure. ");
}

prompt

var result = prompt("What is your name? ", "");
if (result !== null) {
    alert("Welcome, " + result);
}