跨瀏覽器確定一個(gè)窗口的大小不是一件簡單的事。Firefox.Safari.Opera和Chrome均為此提供了4個(gè)屬性：innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中，outerWidth和outerHeight返回瀏覽器窗口本身的尺寸(無論是從最外層的window對象還是從某個(gè)框架訪問)。在Opera中，這兩個(gè)屬性的值表示頁面視圖容器①的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區(qū)的大小(減去邊框?qū)挾?。在Chrome中，outerWidth.outerHeight與innerWidth，innerHeight返回相同的值，即視口(viewport)大小而非瀏覽器窗口大小。

IE沒有提供取得當(dāng)前瀏覽器窗口尺寸的屬性;不過，它通過DOM提供了頁面可見區(qū)域的相關(guān)信息。

在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和

document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中，這些屬性必須在標(biāo)準(zhǔn)模式下才有效;如果是混雜模式，就必須通過do crunent.body.clientWidth和document.body.clientHeight取得相同信息。而對于混雜模式下的Chrome，則無論通過docurnent.documentElement還是document.body中的clientWidth和clientHeight屬性，都可以取得視口的大小。

雖然最終無法確定瀏覽器窗口本身的大小，但卻可以取得頁面視口的大小，如下所示：

var pageWidth=window.innerWidth,

pageHeight=window.innerHeight;

if ( typeof pageWidth !="number")t

if ( document.compatMode== "CSSICompat"){

pageWidth=document.documentElement.clientWidth;

pageHeight=document.documentElement.clientHeight;

} else{

pageWidth=document.body.clientWidth;

pageHeight=document.body.clientHeight;

}

}

在以上代碼中，我們首先將window.innerWidth和window.innerHeight的值分別賦給了pageWidth和pageHeight。然后檢查pageWidth中保存的是不是一個(gè)數(shù)值;南昌網(wǎng)站設(shè)計(jì)公司技術(shù)認(rèn)為如果不是，則通過檢查document.compatMode來確定頁面是否處于標(biāo)準(zhǔn)模式。如果是，則分別使用document.documentElement.clientWidth和document.documentElement.clientHeight的直。否則，就使用document.body.clientWidth和document.body.clientHeight的值。

另外，使用resizeTo()和resizeBy()方法可以調(diào)整瀏覽器窗口的大小。這兩個(gè)方法都接收兩個(gè)參數(shù)，其中resizeTo()接收瀏覽器窗口的新寬度和新高度，而resizeBy()接收新窗口與原窗口的寬度和高度之差。來看下面的例子：

//調(diào)整到100×100

window.resizeTo(100,100);

//調(diào)整到200 x150

window.resizeBy(IOO,50);

//調(diào)整到300x300

window.resizeTo(300,300);

南昌網(wǎng)絡(luò)公司工程師提醒廣大站長需要注意的是，這兩個(gè)方法與移動(dòng)窗口位置的方法類似，也有可能被瀏覽器禁用;而且，在Opera和IE 7(及更高版本)中默認(rèn)就是禁用的。另外，這兩個(gè)方法同樣不適用于框架，而只能對最外層的 window對象使用。

①這里所謂的“頁面視圖容器”指的是Opera中單個(gè)標(biāo)簽頁對應(yīng)的瀏覽器窗口。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.51yjwy.com 如轉(zhuǎn)載請注明出處!