1.用對象控制窗口
1.1訪問窗口屬性和方法
窗口對象的屬性和方法的腳本引用有兩種，其中最符合邏輯、最通用的方法是在引用中包含window對象。如：window.propertyName。當腳本引用指向存放文檔的窗口時，window對象還有一個同義字self，如：self.propertyName。用戶可以交替使用這些初始引用對象名，但是在更爲複雜的、涉及更多框架和窗口的腳本中使用self更適合。self名可以清晰地存放腳本文檔的當前窗口，它使得腳本對於所有用戶更容易讀。因爲window對象在腳本運行時都是一直存在的，所以窗口內任何對象在引用它時都可以忽略它，如：propertyName。
1.2創建新窗口
如果要打開一個指定大小的心窗口，並且要求這個窗口處於當前頁面的同一個服務器目錄下的HTML文檔中，就可以使用如下的語句：
var subWindow = window.open("define.html" , "def", "height = 200, width = 300");
假如需要訪問它的一個屬性或方法，必須把這個引用作爲整個引用的一部分。如：
subWindow.close();
實例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> window對象的引用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var nweWindow function creatNew() { newWindow = window.open("",""); } function closeNew() { newWindow.close(); } // --></mce:script> <BODY> <form> <input type = "button" value = "open new window" onClick = "creatNew()"> <input type = "button" value = "close new window" onclick = "closeNew()"> </form> </BODY> </HTML>
2.窗口屬性
本節主要討論window的屬性，下表列出了IE支持的window對象的屬性
closed 表示窗口是否已經關閉
dafaultstatus 指定在瀏覽器窗口中底部狀態欄中，顯示的默認狀態信息
frames window對象中包含的所有frame對象的數組
length 表示window對象中包含的幀的個數
location 表示與window對象相關的URL的地址
name 窗口標識
opener 標識打開窗口的window對象
parent “雙親”，與包含某個窗口的父窗口含義相同
self “窗口自身”，與引用的當前窗口含義相同
status 指定瀏覽器狀態欄中出現的臨時性信息
top 指一系列嵌套窗口中的最上層瀏覽器窗口
screen 存儲窗口所在屏幕信息的子對象（分辨率等）
2.1closed屬性
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> closed的使用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY onclick = "self.close()"> <center> <font color = "blue" size = "5">window對象</font><br> closed屬性<br> </center> </BODY> </HTML>
2.2status屬性
設置窗口的status屬性是非常簡單的事情，通常腳本語句作爲事件處理定義中的內嵌腳本來運行。這對於短的腳本來說非常方便，因爲不必說明一個單獨的函數或在頁面上加入<script>標記，僅僅需要把腳本語句加入<a>標記即可。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> status的應用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <a href = "http://www.baidu.com/" onmouseover = "window.status = '百度一下，你就知道'; return true;" onmouseout = "window.status = '謝謝'">百度百度？</a> </BODY> </HTML>
2.3opener屬性
許多腳本開發人員都有這樣的一種錯誤想法，認爲由window.open()方法創建的瀏覽器窗口有一個父子關係，正如一個框架與它的父親框架一樣。其實實際情況不是這樣，新的瀏覽器窗口一旦創建，與它的源窗口只有很小的關係，即opener屬性。該屬性的目的在於爲新窗口中的腳本提供一個有效地引用，使之回到源窗口中。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> opener </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- queryWin = open("7-1DOM.html","","height=100"); // --></mce:script> <BODY> </BODY> </HTML>
3.窗口的方法
IE支持的window對象的方法
alert() 顯示提示信息對話框
confirm() 顯示確定對話框
find() 當觸發該方法時，將彈出一個find對話框
Print() 模擬用戶單擊瀏覽器上的“打印”按鈕，通知瀏覽器打開“打印”對話框
Prompt() 顯示要求鍵盤輸入
Open() 打開指定窗口
Close() 關閉指定窗口
Blur() 刪除窗口的焦點屬性
Focus() 將焦點屬性移動到特定窗口
Moveby() 按照給定像素參數移動指定窗口
Moveto() 將窗口移動到指定的座標(x,y)處
Resizeby() 講窗口中的內容按給定的位移量滾動。參數爲正，正向滾動；否則反向
Scrollto() 將窗口中的內容滾動到指定位置
Setinterval() 經過定時時間後，對表達式重複求值
Clearinterval() 取消Setinterval設置的定時
Settimeout() 經過定時時間後，對表達式求職
Cleantimeout() 消除以前的定時設置
3.1alert()方法
該方法用來顯示一個警告對話框，該對話框顯示傳給參數的文本，它類似於由MsgBox函數產生的信息框，但只含一個“確定”按鈕。在執行該方法時，講顯示一條信息並將保持在屏幕上，腳本的執行過程被暫停，知道用戶單擊“確定”按鈕。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> alert方法 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <form> <input type = "button" value = "click here" onclick = "alert('thank you')"> </form> </BODY> </HTML>
3.2confirm方法
confirm方法和alert方法很相似，它也是現實一個信息框，但這個信息框有兩個按鈕，分別爲“確定”和“取消”。如果單擊“確定”按鈕，則confirm方法返回true；如果單擊“取消”按鈕，則返回false。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> confirm </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <form> <input type = "button" value = "confirm" onclick = "confirm('do you want to submit the data ?')"> </form> </BODY> </HTML>
3.3prompt()方法
prompt方法用來提示用戶輸入數據，它類似於inputbox函數。prompt()方法接受兩個參數，其中一個是提示信息，另一個是可選的默認信息。執行該方法後顯示一個對話框，讓用戶輸入信息，輸入後單擊“確定”按鈕，將返回用戶在對話框輸入的信息。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> prompt方法 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- function newPrompt() { var answer = prompt("please enter your name" , "Me a"); if(answer) { alert("hello, "+answer+"."); } } // --></mce:script> <BODY> <form> <input type = "button" value = "click" onclick = "newPrompt()"> </form> </BODY> </HTML>
3.4moveTo()方法
moveTo()方法和moveBy()方法的區別就在於一個是絕對運動，另一個是與當前窗口位置相關的相對運動。爲moveTo制定的參數就是屏幕上窗口的左上角的橫座標和縱座標；相反moveBy的參數表示在每個方向上要將窗口調整多遠。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> moveTo（）方法使用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- function movewin(form) { var winx = form.X.value; var winy = form.Y.value; window.moveTo(winx,winy); } // --></mce:script> <BODY text = "#000000"> <form name = form1> <table border = 0 align = center width = "500"> <tr> <td colspan = 3 align = center bgcolor = white><font color = blue size = 6>輸入窗口位置</font> </td></tr> <tr> <td width = "233"> <font size = "3">X座標爲</font>:<input type = text name = "X" style = "lightblue;color;blue"> </td></tr> <tr> <td width = "233"> <font size = "3">Y座標爲</font>:<input type = text name = "Y" style = "lightblue;color;blue"> </td> <td width = "133"> <input type = button value = "改變窗口位置" onclick = movewin(this.form) style = "background-color:lightgreen;color:blue"> </td> </tr> </table> </form> </BODY> </HTML>
4.使用超時功能
使用window對象的setTimeOut方法，可以指定一個延時及延時之後開始執行的指令。調用setTimeOut()方法，即可啓動一個超時功能。該方法有兩個參數，第一個是在括號中的一條（或一組）Javascript語句，第二個是以毫秒（千分之一秒）爲單位等待時間。舉例來說，下面這條語句將在10秒後顯示一個警示對話框。
ident = window.setTimeOut("alert('Time is up!')", 10000);
我們有時候會希望語句能夠反覆執行，如腳本可能用於更新時鐘，需每秒更新一次。重複超時功能的方法是，在該超時期限調用的函數再次調用setTimeOut()方法。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Timeout 使用方法 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var counter = 0; ID = window.setTimeout("Update();", 2000); function Update() { counter++; document.form1.input1.value = "The counter is now at " + counter; ID = window.setTimeout("Update();", 2000); } // --></mce:script> <BODY> <h1>Timeout 使用方法</h1> <hr><p> The text value below and the status line are being updated every two seconds.Press the RESET button to restart the count,or the STOP button to stop it. </p> <hr> <form NAME = "form1"> <input TYPE = "text" NAME = "input1" SIZE = "40"><br> <input TYPE = "button" VALUE = "RESET" onclick = "counter = 0;"><br> <input TYPE = "button" VALUE = "STOP" onclick = "window.clearTimeout(ID);"> </form> <hr> </BODY> </HTML>
5.使用框架
5.1創建框架
<framset>用來定義一組框架或其它框架集，其屬性如下：
Border 指定框架邊框的寬度（以像素爲單位）
frame border yes或1表示三維邊框；no或0表示平面框架
Rows 指定在垂直方向上將窗口劃分爲幾個框架以及每個框架的大小
Cols 指定在水平方向上將窗口劃分爲幾個框架以及每個框架的大小
<frame>定義單個框架的屬性
Name 框架名稱，JavaScript通過名稱來引用框架
Src 框架中顯示內容的URL地址
Scrolling 默認auto表示瀏覽器必要時提供滾動，yes總顯示滾動，no總不滾動
Marginwidth 指定框架內容裏框架左右邊界的距離，以像素爲單位
Marginheight 指定框架內容以及框架上下邊界的距離，以像素爲單位
示例：
將窗口劃分爲兩個框架：上框架佔30%，下框架佔70%。第一個文件定義框架的劃分，第二個文件包含上框架定義的頁面，第三個文件包含下框架的頁面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 創建上下框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset rows = "30%,70%"> <frame src = "8-10上框架.html"> <frame src = "8-10下框架.html"> </frameset> <BODY> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 上框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY bgcolor = "red" > <h3> 上框架顯示內容<br><br> </h3> <h2>蘭溪</h2> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 下框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY bgcolor = "orange"> <h3> 下部框架顯示內容 </h3> 蘭溪春盡碧泱泱，<br> 映水蘭花雨髮香。<br> 楚國大夫憔悴日，<br> 應尋此路去瀟湘。<br> </BODY> </HTML>
5.2frame對象
在JavaScript中，HTML框架用一個frame對象數組frames[]表示。該數組是window對象的一個屬性，每個數組元素表示一個框架，frames[1]代表<frameset>標記中的第二個框架，以此類推。引用方式爲：
window.frames[i];
window.frames["frameName"];
window.frameName;
6.菜單設計
6.1創建菜單
在下面的示例中，使用框架將窗口分爲兩部分：左框架中顯示一個鏈接組成的菜單，單擊這些菜單時改變右框架中的背景顏色；右框架中顯示一段唐詩和一段文字，用於演示菜單操作的結果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 菜單和導航條 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset cols = "20% , 80%"> <frame src = "8-12菜單.html" name = lframe> <frame src = "8-12導航.html" name = rframe> </frameset> <BODY> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 菜單 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- function setBgColor(color) { parent.frames[1].document.bgColor = color; } // --></mce:script> <BODY bgColor = "white"> <h3>請選擇顏色：<br> <a href = "javascript:setBgColor('red')">紅色</a><br> <a href = "javascript:setBgColor('blue')">藍色</a><br> <a href = "javascript:setBgColor('yellow')">黃色</a><br> <a href = "javascript:setBgColor('green')">綠色</a><br> <a href = "javascript:setBgColor('white')">白色</a><br> </h3> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 右部框架-小詩 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY><center> <h1>山行</h1> 青櫪林深亦有人，一渠流水數家分。<br> 山當日午回峯影，草帶泥痕過鹿羣。<br> 蒸茗氣從茅舍出，繰絲聲隔竹籬聞。<br> 行峯賣藥歸來客，不惜相隨入島雲。<br> </center> </BODY> </HTML>
6.2隱藏菜單
有時在選擇菜單項後，需要將菜單隱藏起來，以提供更多的顯示空間。
示例：
<HTML> <HEAD> <TITLE> 隱藏框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset cols = "110 , 460" rows = "*"> <frame src = "8-13菜單.html" name = "menu"> <frame src = "8-13主頁.html" name = "main"> </frameset> <noframes> <body bgcolor = "white"> </BODY> </noframes> </HTML>
<HTML> <HEAD> <TITLE> 菜單 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var myUrl; function openSite(url) { parent.main.location = url; myUrl = url; } function collapse() { if(!myUrl) { parent.location = "8-13主頁.html"; } else { parent.location = myUrl; } } // --></mce:script> <BODY> <p><a href = "javascript:openSite('8-13主頁.html')">主頁</a><p> <p><a href = "javascript:openSite('http://www.google.com/');">google</a></p> <p><a href = "javascript:openSite('http://www.baidu.com/');">百度</a></p> <p><a href = "javascript:collapse();">隱藏菜單區</a><p> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 主要內容 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY bgcolor = yellow> <h1>這是本站主頁</h1> 青海長雲暗雪山，古城要比玉門關。<br> 黃沙百戰穿金甲，不破樓蘭終不還。<br> </BODY> </HTML>
7.screen對象
screen對象也是window對象的一個屬性。當加載Web頁面時自動創建screen對象。它給出了用戶計算機中的各種顯示特性，包括屏幕像素寬度、高度、顏色深度等。在設計對顯示特性有特殊要求的網頁時，screen對象就比較有用了，比如根據用戶屏幕的大小調整頁面上圖像顯示空間大小等。screen對象的屬性如表所示：
availHeight 屏幕可用高度，以像素爲單位
availWidth 屏幕可用寬度，以像素爲單位
height 屏幕高度，以像素爲單位
width 屏幕寬度，以像素爲單位
colorDepth 顏色深度，使用像素位數表示
8.綜合應用
爲了加深對所學知識的理解，下面的例子使用了窗口的某些屬性。代碼執行後，會在3秒內探出對話框。
