首頁 > 開發者 > JavaScript
原文地址：http://info.codepub.com/2008/05/info-19436.html
使用Window.open方法建立視窗
Window對象表示的是瀏覽器視窗，它有多種操作，其中一個重要的方法是open，表示建立一個視窗來開啟指定頁面。例如在a.html中執行以下語句：
window.open("b.html");
則建立一個視窗開啟了b.html頁面，這和在a.html頁面中用一條連結開啟頁面的效果是一樣的：
<a href="b.html" target="_blank">b</html>
但window.open對建立視窗的樣式可以有更多的控制，例如：視窗大小、是否顯示功能表列、是否顯示捲軸、是否顯示地址欄等等。其完整的調用文法如下：
window.open(url,windowName,"name1=value1[,name2=value2,[…]]");
其中：url是要開啟的頁面地址；windowName表示建立視窗的名字，從而可以對其進行控制；最後是一個用字串表示的參數列表。每一個參數都是名稱和值對應的形式，用逗號隔開，其中可以使用的參數如下。
? height：表示建立視窗的高度；
? width：表示建立視窗的寬度；
? left：表示建立視窗到螢幕左邊緣的距離；
? top：表示建立視窗到螢幕頂端的距離。
以上屬性的單位均為象素，例如對於800×600的解析度，left=400則表示新視窗的左邊緣處於螢幕的正中間。其餘的屬性主要是布爾型的，用yes或者1表示開啟，用no或者0表示關閉。如果是開啟，則yes或者1可省略，例如：toolbar=1等價於toolbar=yes等價於toolbar，下面分別介紹這些屬性：
? directories：是否顯示連結工具列；
? location：是否顯示地址欄；
? menubar：是否顯示功能表列；
? resizable：是否允許調整視窗大小；
? scrollbars：是否顯示捲軸；
? status：是否顯示狀態列；
? toolbar：是否顯示工具列。
例如，下面的代碼將顯示一個無菜單、無工具條、無捲軸的視窗：
window.open("test3.html","","height=200,width=300, toolbar=0,menubar=0,scrollbars=0");
使用定時器實現JavaScript的延期執行或重複執行
window對象提供了兩個方法來實現定時器的效果，分別是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時間後運行；而後者則可以使一段代碼每過指定時間就運行一次。它們的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中，expression可以是用引號括起來的一段代碼，也可以是一個函數名，到了指定的時間，系統便會自動調用該函數，當使用函數名作為調用控制代碼時，不能帶有任何參數；而使用字串時，則可以在其中寫入要傳遞的參數。兩個方法的第二個參數是milliseconds，表示延時或者重複執行的毫秒數。下面分別介紹兩種方法。
1．window.setTimeout方法
該方法可以延時執行一個函數，例如：
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
window.setTimeout(hello,5000);
//-->
</script>
這段代碼將使得頁面開啟5秒鐘後顯示對話方塊“hello”。其中最後一句也可以寫為：
window.setTimeout("hello()",5000);
讀者可以體會它們的差別，在window.setInterval方法中也有這樣的性質。
如果在延時期限到達之前取消延執行，可以使用window.clearTimeout(timeoutId)方法，該方法接收一個id，表示一個定時器。這個id是由setTimeout方法返回的，例如：
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){
window.clearTimeout(id);
}
//-->
</script>
這樣，如果要取消顯示，只需單擊頁面任何一部分，就執行了window.clearTimeout方法，使得逾時操作被取消。
2．window.setInterval方法
該方法使得一個函數每隔固定時間被調用一次，是一個很常用的方法。如果想要取消定時執行，和clearTimeout方法類似，可以調用 window.clearInterval方法。clearInterval方法同樣接收一個setInterval方法返回的值作為參數。例如：
//定義一個反覆執行的調用
var id=window.setInterval("somefunction",10000);
//取消定時執行
window.clearInterval(id);
上面的代碼僅用於說明怎樣取消一個定時執行。實際上在很多場合都需要用到setInterval方法，下面將設計一個秒錶，來介紹setInterval函數的用途：該秒錶將包括兩個按鈕和一個用於顯示時間的文字框。當單擊開始按鈕時開始計時，最小單位為0.01秒，此時再次單擊按鈕則停止計時，文字框顯示經過的時間。另外一個按鈕用於將目前時間清零。其實現代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="開始" name="btnStart"/>
<input type="button" value="重設" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//擷取表單中的表單域
var txt=document.forms[0].elements["txt1"];
var btnStart=document.forms[0].elements["btnStart"];
var btnReset=document.forms[0].elements["btnReset"]
//定義定時器的id
var id;
//每10毫秒該值增加1
var seed=0;
btnStart.onclick=function(){
//根據按鈕文本來判斷當前操作
if(this.value=="開始"){
//使按鈕文本變為停止
this.value="停止";
//使重設按鈕不可用
btnReset.disabled=true;
//設定定時器，每0.01s跳一次
id=window.setInterval(tip,10);
}else{
//使按鈕文本變為開始
this.value="開始";
//使重設按鈕可用
btnReset.disabled=false;
//取消定時
window.clearInterval(id);
}
}
//重設按鈕
btnReset.onclick=function(){
seed=0;
}
//讓秒錶跳一格
function tip(){
seed++;
txt.value=seed/100;
}
//-->
</script>
給定時器調用傳遞參數
無論是window.setTimeout還是window.setInterval，在使用函數名作為調用控制代碼時都不能帶參數，而在許多場合必須要帶參數，這就需要想方法解決。例如對於函數hello(_name)，它用於針對使用者名稱顯示歡迎資訊：
var userName="jack";
//根據使用者名稱顯示歡迎資訊
function hello(_name){
alert("hello,"+_name);
}
這時，如果企圖使用以下語句來使hello函數延遲3秒執行是不可行的：
window.setTimeout(hello(userName),3000);
這將使hello函數立即執行，並將傳回值作為調用控制代碼傳遞給setTimeout函數，其結果並不是程式需要的。而使用字串形式可以達到想要的結果：
window.setTimeout("hello(userName)",3000);
這裡的字串是一段JavaScript代碼，其中的userName表示的是變數。但這種寫法不夠直觀，而且有些場合必須使用函數名，下面用一個小技巧來實現帶參數函數的調用：
<script language="JavaScript" type="text/javascript">
<!--
var userName="jack";
//根據使用者名稱顯示歡迎資訊
function hello(_name){
alert("hello,"+_name);
}
//建立一個函數，用於返回一個無參數函數
function _hello(_name){
return function(){
hello(_name);
}
}
window.setTimeout(_hello(userName),3000);
//-->
</script>
這裡定義了一個函數_hello，用於接收一個參數，並返回一個不帶參數的函數，在這個函數內部使用了外部函數的參數，從而對其調用，不需要使用參數。在 window.setTimeout函數中，使用_hello(userName)來返回一個不帶參數的函數控制代碼，從而實現了參數傳遞的功能。
使用status和defaultStatus屬性改變狀態列資訊
status和defaultStatus是window對象的屬性，用於設定狀態列資訊，文法為：
window.status="message";
window.defaultStatus="message";
其中status屬性就是用於設定狀態列顯示的文本。而defaultStatus表示預設的狀態列資訊，例如預設情況下IE瀏覽器會顯示“完畢”，而Firefox瀏覽器則顯示“完成”。可以通過defaultStatus來改變這一資訊。
使用alert、prompt和confirm語句與使用者進行互動
這三個語句都是彈出一個對話方塊，來處理使用者輸入。它們都是window對象的一個方法，在實際使用時，常常省略window，而直接寫成alert("hello")類似的形式。下面分別介紹：
1．alert語句
該語句的原型是：
window.alert(message);
alert接收一個參數，該參數將轉換為字串直接顯示在對話方塊上，例如：
alert("hello,ajax");
2．prompt語句
該語句的原型是：
window.prompt(message,defaultValue);
prompt用於讓使用者輸入一個值，其中message表示提示資訊，defaultValue表示顯示於文字框的初始值；函數返回使用者的輸入。對話方塊包括【確定】和【取消】兩個按鈕，使用者單擊【確定】按鈕則返迴文本框中的內容，單擊【取消】則返回null。例如：
var userName=window.prompt("請輸入您的姓名：","");
alert("hello,"+userName);
其中prompt提示使用者輸入其姓名，使用userName變數擷取使用者輸入，並顯示歡迎資訊。
3．confirm語句
該語句的原型是：
window.confirm(message);
其作用是顯示一條資訊讓使用者確認，彈出的對話方塊包括【確定】和【取消】兩個按鈕，如果使用者單擊【確定】，則confirm函數返回true，否則返回false。例如下面的語句：
if(confirm("確定刪除該記錄嗎？")){
//刪除記錄的操作
}else{
//不刪除記錄
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
