24h購物| | PChome| 登入
2011-08-26 16:04:23| 人氣1,913| 回應0 | 上一篇 | 下一篇

JavaScript-常用的視窗 (Window)物件

推薦 0 收藏 0 轉貼0 訂閱站台

視窗 (Window):

視窗物件即是指瀏覽器視窗, 它是最高層次的物件之一,因此用途很廣,例如:開啟新視窗、彈出訊息對話盒和,提示對話盒、控制視窗...等。

下表列出了視窗物件的方法屬性:


物件方法屬性事件
windowalert(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 可以是任何型態的資料。

程式範例(彈出訊息對話盒): 看程式samp30.html執行結果


<form>
<input type="button" value="Pop-up an alert box" >
</form>

2.confirm(message) 彈出詢問對話盒:對話盒內只有確定取消 兩個按鈕,按下確定就傳回 true,按下取消就傳回 false。message 可以是任何型態的資料。


程式範例( 彈出詢問對話盒): 看程式samp31.html執行結果

<form>
<input type="button" value="Pop-up an confirm box"
>
</form>

3.prompt(message, inputDefault) 彈出輸入對話盒:inputDefault 是輸入對話盒預設的輸入資料,message 是輸入對話盒的訊息,當使用者確定輸入後,就會傳回輸入了的資料。message 和 inputDefault 可以是任何型態的資料。


程式範例( 彈出輸入對話盒): 看程式samp32.html執行結果

<form>
<input type="button" value="Ask me a question"
>
</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>


5.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" >
<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" >
</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> 標記內的。

程式範例: 看程式samp36.html執行結果
當使用者進入與及離開某一頁時,彈出 "擾人的" 進入及離開(annoying) 訊息對話盒:)


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

 

 


(參考來源)
http://www.9w2u.com/htmlbook.asp?book=2
http://welkingunther.pixnet.net/blog/post/32084577
http://ant4js.blogspot.com/2009/01/windowmthv6.html

台長:
人氣(1,913) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 不分類 | 個人分類: JavaScript |
此分類下一篇:JavaScript-showModalDialog()
此分類上一篇:JavaScript-流程控制 (Flow Control)

是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼:
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文