視窗

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

物件 方法 屬性 事件
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 是輸入柜的訊息， 當使用者確定輸入後， 就會傳回輸入了的資料。 message 和 inputDefault 可以是任何型態的資料。

    例子： 彈出訊息柜

    <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 便可。
    • 除了用 yes 和 no 之外， 還可以用其它表示方式，

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

      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>

    <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>

    <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 的同義詞， 指正在使用的視窗

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

事件

最常用的是 onLoad 和 onUnload 。 當一頁 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>

<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>

<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。

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 羅 朝淇 的頭像
    羅 朝淇

    羅 朝淇的部落格

    羅 朝淇 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄