window对象

标签：移动   操作符   宽度   fine   cli   位置   var   实例   cti   

在ECMAScript中，BOM(浏览器对象模型)提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关，BOM的核心对象是window，他表示浏览器的一个实例。在浏览器中，window对象有双重角色：既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都是以window作为Global对象，因此有权访问parseInt()等方法。

全局作用域

由于window对象同时扮演着ECMAScript中的Global对象的角色，因此所有在全局作用域中声明的变量。函数都会变成window对象的属性和方法。

var age = 20;
function sayAge(){
    console.log(this.age);
}
console.log(window.age);    //20
sayAge();                   //20
window.sayAge();            //20

抛开全局变量会变成window对象的属性不谈，定义全局变量与在window对象上直接定义属性还是有差别的：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。

var bgColor = "red";
window.color = "pink";
delete window.bgColor;    //IE<9时抛出错误，其他浏览器中都返回false
delete window.color;      //IE<9时抛出错误，其他浏览器中都返回true
console.log(window.bgColor);   //red
console.log(window.color);     //undefined

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

var newValue = oldValue;   // Uncaught ReferenceError: oldValue is not defined
var newValue = window.oldValue;  //不会抛出错误，这只是一次属性查询。

窗口位置

用来确定和修改window对象位置的属性和方法有很多，IE、Safari、Opera和Chrome都提供screenLeft和screenTop属性，Firefox则提供了screenX和screenY属性，但与screenLeft和screenTop属性并不对应，因此常使用下列三元运算符来取得位置信息。

var leftPos = (typeof window.screenLeft == ‘number‘) ? window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == ‘number‘) ? window.screenTop:window.screenY;

窗口大小

不同浏览器中，确定窗口大小的方法不同，在IE9、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸；在Opera中，outerWidth和outerHeight表示页面视图容器的大小，innerWidth和innerHeight表示该容器中页面视图区的大小；在Chrome中，outerWidth、outerHeight和innerWidth、innerHeight返回相同的值，即视口大小而非浏览器窗口大小；在IE9、Safari、Firefox和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息，在IE6中，这些属性必须在标准模式下才有效，如果是混杂模式，必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。

虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小：

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.body.clientHeight;
   }
}

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小，这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差。

// 调整到100*100
window.resizeTo(100,100);
// 调整到200*150
window.resizeBy(100,50);
// 调整到300*300
window.resizeTo(300,300);

这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用，另外，这两个方法不适用于框架，而只能对最外层的window对象使用。

window对象

标签：移动   操作符   宽度   fine   cli   位置   var   实例   cti   

原文地址：https://www.cnblogs.com/yuyujuan/p/9200966.html