1. 程式人生 > >認識Javascript中控制視窗大小的Screen和Window物件

認識Javascript中控制視窗大小的Screen和Window物件

Screen物件儲存了客戶的電腦螢幕資訊,這些資訊可以用來探測客戶端硬體的基本配置

Screen物件的基本屬性:

availHight:顯示Web瀏覽器的螢幕可用高度,不包括Windows的工作列(重點是顯示屏而不是瀏覽器,這邊不要誤解,它只是只是瀏覽器可以用剩下多高的顯示屏高度)

availWidth:顯示Web瀏覽器的螢幕可用寬度,不包括Windows的快捷方式欄

availLeft:螢幕最左側的x座標

availTop:螢幕最頂部的y座標

colorDepth:瀏覽器分配的顏色數或者顏色深度

height:顯示Web瀏覽器的螢幕高度

width:顯示Web瀏覽器的螢幕寬度

pixelDepth:顯示瀏覽器的螢幕的顏色深度

以下的例子是演示如何讓彈出的視窗居中顯示,並且在指定的時間內關閉視窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Screen物件</title>
</head>

<body>
<script type="text/javascript">
function center(url)
{
	var h = screen.availHeight/2;
	var w = screen.availWidth/2;
	var hh = (screen.availHeight-h)/2;
	var ww = (screen.availWidth-w)/2;
	var p = "top="+hh+",left="+ww+",width="+w+",height="+h;
	var win = window.open(url,"name",p);
	win.focus();
	setTimeout(function(){
		win.close();
		},5000)
}
center("http://www.baidu.com");
</script>
</body>
</html>

除了Screen物件,Window物件也定義了3組方法分別用來調整視窗位置,大小和滾動條的偏移位置,分別是之前的我的一篇部落格中講到的

moveTo(),moveBy():調整視窗位置的兩個函式

resizeTo(),resizeBy():調整視窗大小的兩個函式

scrollTo()和scrollBy():調整視窗滾動條的偏移位置的兩個函式

這些方法都包含兩個引數,分別表示x軸座標和y軸座標值。

含To的方法都是絕對的,也就是x和y引數給出的視窗新的絕對位置、大小或滾動偏移。也就是我們常說的"變化到多少"

含By的方法是相對的,也就是在視窗的當前位置、大小或滾動偏移上增加所指定的引數x和y的值。也即是我們常說的

"變化了多少"

以下的示例能夠將當前的瀏覽器視窗大小重新設定為200畫素寬高,然後生成一個任意數字來隨機定位視窗在螢幕中的顯示位置。

<script type="text/javascript">
window.onload = function(){
timer = window.setInterval("jump()",1000);
}
function jump(){
window.resizeTo(200,200)
x = Math.ceil(Math.random() * 1024)
y = Math.ceil(Math.random() * 760)
window.moveTo(x,y)
}
</script>

同時Window物件的focus()和blur()方法,用來控制視窗的顯示焦點,呼叫focus()方法會請求系統將鍵盤焦點賦予視窗,會把視窗移到堆疊順序的頂部,使視窗可見,呼叫blur()則會放棄鍵盤焦點。

注意:使用Window物件的open()方法開啟新的視窗時,瀏覽器會自動在頂部建立視窗,不過如果指定的視窗已經存在,則不會自動使那個視窗可見。