JavaScript

   


視窗 (Window)


視窗

視窗物件即是指瀏覽器視窗, 它是最高層次的物件之一, 因此用途很廣, 例如: 開啟新視窗、彈出訊息柜和輸入柜、控制窗柜等。 下表列出了視窗物件的方法屬性:

物件 方法 屬性 事件
window alert(message)
close()
confirm(message)
open(url, name, features)
prompt(message, inputDefault)
setTimeout(statement, delay)
clearTimeout(timer)
defaultStatus
frames[ ]
length
name
opener
parent
self
status
top
window
onLoad
onUnload

方法

  1. alert(message)  彈出訊息柜

    message 可以是任何型態的資料。

    例子: 彈出訊息柜

    <form>
    <input type="button" value="Pop-up an alert box" onClick="alert('Hi, I am alert box.')">
    </form>

  2. confirm(message)  彈出詢問柜

    柜內只有確定取消 兩個按鈕, 按下確定就傳回 true, 按下取消就傳回 false。 message 可以是任何型態的資料。

    例子: 彈出訊息柜

    <form>
    <input type="button" value="Pop-up an confirm box"
    onClick="var reply = confirm('Are you sure?') ; alert(reply)">
    </form>

  3. prompt(message, inputDefault)  彈出輸入柜

    inputDefault 是輸入柜預設的輸入資料, message 是輸入柜的訊息, 當使用者確定輸入後, 就會傳回輸入了的資料。 messageinputDefault 可以是任何型態的資料。

    例子: 彈出訊息柜

    <form>
    <input type="button" value="Ask me a question"
    onClick=" var name = prompt('What is your name?.' , 'You name here') ; alert('Hi, ' + name) ">
    </form>

  4. window.open(url, name, features)  開啟新視窗

    為免和 document.open 混淆, 因此寫 winodw.open 而不應只寫 open; url 是新視窗開啟後要載入的 URL, 如果它是空字串 (empty string), 就會開啟空視窗; name 是新視窗名稱, 用作 <a> 和 <form> 的目標, 即是它們的 target 屬性; features 是新視窗的設定, 它是選擇性的參數 (optional argument), 但格式比較特別, 我首先會介紹 features 的屬性 (這個屬性是指 Attribute), 然後說明它的寫法:

    features 的屬性 說明
    height 視窗高度的點數 (pixel)
    width 視窗高度的點數 (pixel)
    location 位置欄
    directories 分類目錄列
    menubar 主選單
    scrollbars 捲軸
    status 狀態列
    toolbar 工具列
    resizable 可否改變視窗大小

    寫法: features 的屬性

    例子: 視窗的闊度和高度分別是 300 點和 200 點, 要有位置欄和主選單, 但不要有狀態列和工具列

    "width=300 height=200 location,menubar=yes status,toolbar=no"

    • 它是 name/value pairs 格式, 只須把你想要的屬性指定為 yes , 不想要屬性指定為 no 便可。
    • 除了用 yesno 之外, 還可以用其它表示方式,

      寫法:以下三行都可以令視窗有位置欄和主選單, 但沒有狀態列和工具列

      1. "location,menubar=yes status,toolbar=no"
      2. "location,menubar=1 status,toolbar=0"
      3. "location,menubar"     (除了位置欄和主選單名外, 所有東西都不要)

    例子: 開啟新視窗, 它要載入 Yahoo 的 URL , 名稱叫 winname , 闊度和高度分別是 300 點和 200 點, 有位置欄和主選單, 沒有狀態列、工具列和捲軸。

    <html><head>
    <script>
    var winvar = window.open("http://www.yahoo.com","winname",
    "location,menubar=1 status,toolbar,scrollbars=0");
    </script>
    </head><body>
    See a new window?
    </body</html>

    例子: 開啟新視窗, 它不用載入任何 URL , 也不用設定屬性, 名稱叫 winname , 新視窗開啟後要介紹自己的名稱和 title。

    <html><head><title> I am opener of winname </title>
    </head><body>
    My son, winname, has just born.<br>
    <a href="http://www.yahoo.com" target="winname">Bring my child to Yahoo</a>
    </body</html>

    <script>
    <!--
    var winvar = window.open("","winname");
    winvar.document.write("<br>My name is " + winvar.name);
    winvar.title = "A New Window"
    winvar.alert("and my title is " + winvar.title);
    //-->
    </script>

    例子說明:

    • var winvar = window.open("","winname");

      winvar 成為新視窗物件變數, 以後要表示該個新視窗就可以用 winvar 了。 winname 是用作指定目標的, 頁中 "Bring my child to Yahoo" 連結的 target 屬性, 它的值是 winname , 所以該連結會在 winname 視窗開啟。

  5. window.close()  關閉視窗

    主要用來關閉由 window.open() 開啟的視窗, 關閉其它視窗則要經過瀏覽者同意才會關閉。

    例子: 關閉視窗

    <html><head>
    <script>
    var winvar = window.open("","winname");
    </script>
    </head><body>
    See a pop-up window? Is it annoying?
    <input type="button" value="Close the pop-up window" onClick="winvar.close()">
    <br>
    Want to close me also? No problem, but remember to come back. I will be waiting for you.
    <br>
    <input type="button" value="Close this window" onClick="window.close()">
    </body</html>

  6. setTimeout(statement, delay)

    在某個時段過後自動執行某敘述。 statment 是字串型態資料, 表示要執行的 JavaScript 敘述; delay 是延遲的時間, 單位是微秒 (milli-second)。

    語法:

    setTimeout(statement, delay)

    如果想用 clearTimeout() 取消某個計時器, 可以用一個變數來表示該計時器:
    timer
    = setTimeout(statement, delay)

    例子: 在五秒之後彈出 alert

    <html><head>
    <script>
    setTimeout("alert('5 seconds has passed')" , 5000);
    </script>
    </head><body>
    An alert box will appear in 5 seconds
    </body></html>

  7. clearTimeout(timer)

    停止某個計時器。 timer 是要停止的計時器變數。

    例子: 停止計時

    <html><head>
    <script>
    var i = 0;
    var timer;
    function count() {
      window.status = i;
      i++;
      timer = setTimeout("count()" , 1000);
    }
    count()
    </script>
    </head><body>
    <form>
    <input type="button" value="Stop counting" onClick="clearTimeout(timer)">
    </form>
    </body></html>

屬性

其實某些屬性本身也可以是一個物件, 下面列出了視窗物件的屬性和說明:

屬性 說明
defaultStatus 預設的狀態列文字, 當狀態列沒有被設定時, 就會顯示它的內容
frames[ ] 它是一個陣列, 用來表示視窗內的各個窗柜 (Frame)
length 窗柜數目
name 視窗名稱
opener 表示用 window.open() 開啟本身的那個視窗
parent 可以表示視窗或窗柜, 例如本身的一頁是在窗柜內, parenet 就是指有 <frameset> 並且包含本身的那個視窗或窗柜
self 是 window 的同義詞, 指正在使用的視窗
status 狀態列顯示的文字
top 最上層的視窗, 而 parent 則是指上一層, 正如第一代與上一代的分別
window 是 window 的同義詞, 指正在使用的視窗

至於有關窗柜物件的用法, 請參閱中階教學的窗柜物件部份。

事件

最常用的是 onLoadonUnload 。 當一頁 HTML 文件完全被載入時, 就會產生 onLoad 事件; 而當它被釋出, 例如當瀏覽者離開那頁, 就會產生 onUnload 事件。 這兩個事件處理者是寫在 <body> 標記內的。

例子: 當使用者進入與及離開某一頁時, 彈出 "擾人的" (annoying) 訊息柜  :)

<html><head><title> onLoad , onUnload </title></head>
<body onLoad="alert('Welcome')" onUnload="alert('Good Bye')">
An alert box pops up every time you visit, reload or leave this page.
</body</html>

 

偵測變數是否存在

只須在變數名稱之前加上 window 一字, 再用 if 敘述, 就可以知道該變數是否存在, 或是否被定義 (defined)。

例子: 偵測變數 x 和 y 是否存在

<script>
var x = 10 ;
var y ;
document.write("<br>x = " + x + "<br>");
if (window.x) document.write("x is defined");
else document.write("x is NOT defined");
document.write("<br>y = " + y + "<br>");
if (window.y) document.write("y is defined");
else document.write("y is NOT defined");
document.write("<br>");
if (window.z) document.write("z is defined");
else document.write("z is NOT defined");
document.write("z = " + z);
</script>

說明:

  • 因為變數 x 被定義了, 而數值是 10 , 所以 window.x 會傳回 true 給 if 敘述。 雖然變數 y 被定義了, 但沒有指定它的值, 因此它的值是 Null, window.y 會傳回 false 給 if 敘述。 變數 z 根本不存在, 所以結果和變數 y 一樣, 而且會導致執行錯誤: 'z' is not defined

例子: 永遠只在同一個視窗開啟 URL

<script>
function openurl() {
var url = "index.html" ;
if (!window.winvar || winvar.closed) winvar = window.open(url);
else winvar.location = url;
}
</script>

<form>
<input type=button value="Open URL in one window only"
onclick="openurl()">
</form>

說明:

  • !window.winvar || winvar.closed

    偵測變數 winvar 是否未被定義, 或者是否被關閉了, 如果是的話, 就自行定義 winvar。 否則, 就表示變數 winvar 已經被定義, 而且它未被關閉, 因此我們可以用它的 location 屬性來開啟 URL。

 







[到頁頂] [首頁] [速查表]