js高级编程-Bom

8.1.3窗口位置

 

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

 

Firefox则在screenX和screenY属性中提供相同的窗口位置信息。Safari和Chrome也同事支持这两个属性

 

使用下面的代码可以跨浏览器取得窗口左边和上边的位置

 

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

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

这个例子运用二院操作符首先确定screenLeft和screenTop的属性是否存在，如果不存在，就取得screenX和screenY的值。

 

8.1.4 窗口大小

在IE,以及Safari,Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了窗口大小的信息。在IE6中，这些属性必须在

标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth和document.body。clientHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过document.domentElement还是document.body中的clientWidth和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);

 

注意这两个方法有可能被高版本的浏览器禁用