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);
注意这两个方法有可能被高版本的浏览器禁用