|
視窗 (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 |
|
方法：
１．alert(message) 彈出訊息對話盒：message 可以是任何型態的資料。
程式範例（彈出訊息對話盒）： 看程式samp30.html執行結果
|
<form>
<input type="button" value="Pop-up an alert
box" onClick="alert('Hi, I am alert box.')">
</form> |
|
２．confirm(message) 彈出詢問對話盒：對話盒內只有確定和取消 兩個按鈕，按下確定就傳回
true，按下取消就傳回 false。message 可以是任何型態的資料。
程式範例（ 彈出詢問對話盒）： 看程式samp31.html執行結果
|
<form>
<input type="button" value="Pop-up an confirm
box"
onClick="var reply = confirm('Are you sure?') ;
alert(reply)">
</form> |
|
３．prompt(message, inputDefault) 彈出輸入對話盒：inputDefault 是輸入對話盒預設的輸入資料，message
是輸入對話盒的訊息，當使用者確定輸入後，就會傳回輸入了的資料。message 和 inputDefault 可以是任何型態的資料。
程式範例（ 彈出輸入對話盒）： 看程式samp32.html執行結果
|
<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 是新視窗名稱，用作和的目標，即是它們的 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 便可。
除了用 yes 和 no 之外，還可以用其它表示方式，
寫法：以下三行都可以令視窗有位置欄和主選單，但沒有狀態列和工具列
"location,menubar=yes status,toolbar=no"
"location,menubar=1 status,toolbar=0"
"location,menubar" (除了位置欄和主選單名外， 所有東西都不要)
程式範例： 看程式samp33.html執行結果
開啟新視窗，它要載入 Yahoo 的 URL ，名稱叫 winname ，寬度和高度分別是 300 點和 200 點，有網址欄和主選單，沒有狀態列、工具列和捲軸。
|
<html><head>
<script>
var winvar = window.open("http://www.yahoo.com","winname",
"width=300 height=200 location,menubar=1 status,toolbar,scrollbars=0");
</script>
</head><body>
See a new window?
</body</html> |
|
程式範例： 看程式samp34.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>
|
|
５．window.close() 關閉視窗：主要用來關閉由 window.open()
開啟的視窗，關閉其它視窗則要經過瀏覽者同意才會關閉。
程式範例（關閉視窗）： 看程式samp35.html執行結果
|
<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> |
|
屬性：
其實某些屬性本身也可以是一個物件，下面列出了視窗物件的屬性和說明：
|
| 屬性 |
說明 |
| defaultStatus |
預設的狀態列文字， 當狀態列沒有被設定時， 就會顯示它的內容 |
| frames[ ] |
它是一個陣列， 用來表示視窗內的各個窗柜 (Frame) |
| length |
窗柜數目 |
| name |
視窗名稱 |
| opener |
表示用 window.open() 開啟本身的那個視窗 |
| parent |
可以表示視窗或窗柜， 例如本身的一頁是在窗柜內， parenet 就是指有 <frameset> 並且包含本身的那個視窗或窗柜 |
| self |
是 window 的同義詞， 指正在使用的視窗 |
| status |
狀態列顯示的文字 |
| top |
最上層的視窗， 而 parent 則是指上一層， 正如第一代與上一代的分別 |
| window |
是 window 的同義詞， 指正在使用的視窗 |
|
事件：
最常用的是 onLoad 和 onUnload 。當一頁 HTML 文件完全被載入時，就會產生 onLoad
事件；而當它被釋出，例如當瀏覽者離開那頁，就會產生 onUnload 事件。這兩個事件處理者是寫在 <body> 標記內的。
程式範例： 看程式samp36.html執行結果
當使用者進入與及離開某一頁時，彈出 "擾人的" 進入及離開(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)。
程式範例： 看程式samp37.html執行結果
偵測變數 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 。
程式範例： 看程式samp38.html執行結果
永遠只在同一個視窗開啟 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。 |
