分类： 系统运维
2006-07-14 14:07:54
第 2 章 window Object
renewed 2004
作者: 伍新華 Email:
本網頁只可連線觀看, 如要轉載, 請用連結方式,
以確保網頁可不時更新及各圖片連結正常。
若有些圖片不能顯示, 請重新載入一次。螢幕解像度最好是 800 x 600
這一章分兩頁: 這是 第一頁 ,
1. 父視窗與子視窗
2. 開啟子視窗的 method
3. 子視窗的 property
4. 不斷開啟的子視窗
5. 開啟兩個子視窗
第二頁:
2.7 視窗移位: moveTo( ) 及moveBy( )
2.8 調校視窗大小: resizeTo( ) 及 resizeBy( )
2.9 其他 window method
2.10 隱藏及不能關閉的視窗
2.11 window 的 status property
2.12 window 的 screen object
2.13 location object
在第一章說過, 我們指定 一個物件 (address an object) 後, 就可為這物件的 method 或 property 編寫程式碼, 產生一些效果, 請看下圖:
圖 2-1 一個 object 的 method 和 property 操作
這一章是說 window object 的 method 和 property。
1. 在 JavaScript , window 是指瀏覽器 (browser) 的視窗, 是最頂層的 object (物件), 這一章詳細說到 window 物件以下的 method。
window.open( ) window.close( )
window.moveTo( ) window.moveBy( )
window.resizeTo( ) window.resizeBy( )
這一組 method 是用來開啟新視窗及關閉視窗, 另可用來控制視窗的位置及大小。
2. 以下一組 method 是用設定三類的對話盒:
window.alert( ) window.confirm( ) window.prompt( )
這些對話盒在第 3 章詳細說明。
3. window 的 setTimeout( ) 及 setInterval( ) 這兩個 method 也常用於各場合, 因操作較為複雜, 所以在 第 10 章詳細解說。
4. window 有多個 property, 這一章會說到 status、screen 及 location 這三個 property。
5. window 還有很多其他 method , 但用途不大, 例如 back( ), forward( ), home( ), scrollTo( ), scrollBy( ), stop( ), print( ) 等等, 都無重要性, 所以筆者只會提及, 不會詳細說明或舉例。
6. 使用 window 的 Method 時, window 可略去, 例如 window.open( ) 及window.close( ) 等等在很多地方可簡為 open( ) 及 close( )。
但在 Event handler 內就未必能簡略, 例如 onClick= "window.close( )" 就 不能 簡為 onClick="close( )" , 我們很多時不知道各版本的瀏覽器對簡化寫法的容忍程度 , 所以為了安全, 應盡量使用標準寫法。
1. "method" 可以譯作 "方法", 是一項可以產生反應的功能, 每個物件有關連的 method , 例如 window 有 open( ) 的 method, 是用來開啟一個新的瀏覽器視窗, 在程式中用 window.open( ) 的語法, 表示這 open( ) method 是屬於 window 的, 隨後有很多 window.open( ) 的例子, 都是產生新視窗。
2. 每個 method 後會有 ( ) 的符號, 前面一般會有 object 的名稱 (但有例外), 例如 document.write() , document 是物件, write( ) 是屬於這物件的 method, 是用來在畫面顯示文字。
3. 我們在使用手冊中查看各物件的 method, 和查看每個 method 的功能, 就可在程式中應用。
4. 請參考 1.4 的一節中的解說。
瀏覽器開啟時, 會自動開啟一個視窗, 這就是一個 window object (視窗物件), 在這視窗載入一個網頁時 (這網頁就是 document object), 若這網頁內有 window. open( ) 這一個 method, 瀏覽器就會開啟另一個新視窗, 是為子視窗 (這也稱為 popup window), 先前的第一個視窗就是父視窗, 請看 圖 2- 1。
圖 2-2 在父視窗中可開啟子視窗
這項功能最有用的地方是在正常的網頁中 (父視窗), 另開一個新視窗 (子視窗) 來向觀看者顯示一些特別訊息, 例如觀看者開啟一個網頁時, 會同時彈出子視窗來向觀看者介紹一些商品。有些人會用一個約佔 3/4 畫面的子視窗, 也有人喜歡在畫面上方彈出一個高約一吋的橫條視窗, 後者對主畫面影響較少。
我們可以使用以下的 method 來開啟一個視窗:
1. msgWin 是一個識別 (identifier) 名稱 (msg 習慣用來代表 message), 我們可任意取名 (但要符合第一章1.8-6 的一節說的 idenitfier 規格)。
留意我們給予這子視窗兩個名稱 (msgWindow 和 window2), msgWin 是一個 idenitfier (識別名稱), 這名稱在 JavaScript 中使用(例如在 function 或 method 中使用) , 我們在 JavaScript 中進行一些操作, 例如使用練習-16 說的辦法, 用按鈕來關閉子視窗, 就要使用 msgWin 這名稱。
window2 這名稱用於 HTML 的網頁操作 , 例如指定在子視窗載入某個網頁, 就使用這名稱。
我們可以同時開啟多個子視窗, 例如使用以下的 script:
這處開啟三個子視窗, 分別用三個不同 identifier 來代表, 我們要使用 JavaScript 來控制某個子視窗, 就可用 msgWin、adWin、discountWin 等名稱。
2. window2 是我們給予 這子視窗在網頁上的操作名稱 , 這名稱可以不要, 但假若有一些網頁連結是以這子視窗為目標, 例如我們要在某個子視窗用連結的方式載入一個網頁, 就是用這名稱。
有時我們省去一些標準事項, 實際後果如何無法知道, 為了安全, 所以就算不用到這名稱也循例加上去 , 又或加上去而不設名字, 例如: window. open("product.htm","") ; 。
3. window.open( ) 是開啟子視窗的 method, "product.htm" 是在子視窗載入的檔案, 若父網頁與子網頁是在同一目錄, 就不需指明目錄位置, 若要開啟其他目錄的網頁, 就要使用正確的 URL, 例如: window.open("subfile/index.htm" , "win2"), 這是開啟 subfile 子目錄內的 index.htm, 又或是: window.open("~philip /index.htm" , "win2"), 這是在子視窗載入網路內另一個網頁。
4. 若想開啟一個空的子視窗, 可以如此寫法： window.open("" , "window2 "); 或 window.open("" , ""); 。
1. 第一章說過 identifier (識別名稱), 我們造出一項資料 (物件、變數、function 等等), 可以給予這項資料一個名稱, 作為識別這項資料之用, 當我們要用程式碼控制這項資料時, 就要使用這名稱。
2. 在上段的例子, 我們開啟了三個子視窗, 分別給予 msgWin、adWin、discountWin 的名稱, 這三個就是 identifier。
3. 例如在 父視窗有這按鈕: Close the advertisement window
留意 onClick="adWin.close ( );" 這一句, 這是利用 close( ) 來關閉一個視窗, 這處利用 adWin 這 identifier 來指定要關閉的視窗, 這樣就不會關閉了其他視窗。
你可以在 window.open( ) 中加入以下參數來指定子視窗的 property (屬性), yes 或 1 表示要, no 或 0 表示不要, property 的設定一定要在一行中完成 (因這是一個 argument, 請看第 1 章中的解釋), 例如:
圖 2-3 子視窗的屬性設定方式
以下是子視窗的 property 的可選值, 可設為 yes (或 1) 或 no (或 0) :
menubar=yes/no 或 1 / 0 (是否要功能列, 預設是 no )
toolbar=yes/no 或 1 / 0 (是否要工具列, 預設是 no )
location=yes/no 或 1 / 0 (是否要位址輸入列, 預設是 no )
directories=yes/no 或 1 / 0 (是否要預設連結按鈕列, 預設是 no )
status=yes/no 或 1 / 0 (是否要狀態列, 預設是 no )
scrollbars=yes/no 或 1 / 0 (是否要捲軸, 預設是 no )
resizable=yes/no 或 1 / 0 (視窗是否能改變大小, 預設是 no )
width=pixels (視窗的寬度, pixels 是圖點數目, IE 預設是最大 )
height=pixels (視窗的高度, pixels 是圖點數目, IE 預設是最大 )
( width= 及 height= 最好一起使用, 避免只使用一個, 一些瀏覽器對一個單獨高度或單獨寬度沒反應, 這兩個參數間也不能有空格。)
若不指明子視窗的屬性, 例如: window.open("product.htm" , "window2 ") ;
或 window.open("" , "") ;
開啟的是一個完整子視窗 (有工具列及狀態列等等), 但不同版本可能會有不同處理方式。
若有指定子視窗任何一個屬性, 例如: window.open("" , "" , "toolbar=yes") ;
就只有指定的附件 (這例子是 toolbar) 及標題列, 其他一概沒有。
若有指定屬性而不填入任何數值, 例如: window.open ("product.htm" , "window2" , "") ;
在 Netscape 出現的子視窗只有標題列, 在 IE 出現的子視窗就全部附件都有, 這兩個瀏覽器在 window.open( ) 有很多不同之處。
在這練習, 你看到用瀏覽器開啟一個網頁 (open1.htm) 時, 會另行開啟一個子視窗及在這子視窗載入 promo1.htm 這檔案。
1. 請開啟示範檔案, 這檔案有以下內容。
This is parent window: open1.htm
2. 父視窗開啟後, 請你看看走出來的子網頁, 留意子視窗有哪些附件及是否可改變大小, 看完後關閉這子視窗。
Q-2.1
1. 請用「記事本」在你的電腦中造出 open1.htm 和 promo1.htm 這兩個檔案, 將這兩個檔案存在硬碟同一目錄位置。(或在上述練習開啟
open1.htm, 然後在功能列中選擇 [檢視原始檔], 或用滑鼠右鍵按網頁空白地方, 在出現的功能表中選 [檢視原始檔], 就可將網頁檔案存在硬碟。)
2. 將 open1.htm 內的 window.open( ) 作以下更改:
window.open("promo1.htm"
, "window2",
"toolbar=yes,scrollbars=yes,resizable=no,width=450,height=250");
在瀏覽器中載入這新的 open1.htm, 留意子視窗有什麼改變。
3. 留意 "toolbar=yes . . . . . height=250" 這句要在一行完成, 不可分行。
請你試將這一句分成兩行, 即是:
window.open("promo1.htm"
, "window2",
"toolbar=yes,scrollbars=yes,resizable=no,
width=450,height=250");
看有什麼後果。
在上述的例子, 你看到開啟一個網頁時, 可以利用 JavaScript 來再開啟另一個網頁, 若這新的網頁又使用 JavaScript 來開啟另一個網頁, 這程序可以不斷重複, 所以新視窗會不停出現, 直至觀看者的電腦系統崩潰而當機, 這類即時爆發的破壞性程式是為 bomb (炸彈), 用 JavaScript 寫成的是 JavaScript bomb。網上常有人以這種網頁作弄別人, 雖然不會破壞硬碟的資料, 但若觀看者當時開啟了其他工作 (例如 Word 或 Excel 等等), 工作中的資料就不能存檔, 這引致時間的損失。
你設計 JavaScript 時, 不要在無意間造了一個 bomb 出來, 在這處的例子, 你要小心子視窗的名稱, 不可與父視窗一樣, 例如你在 index.htm 這檔案內放下這一個程式碼:
觀看者用瀏覽器開啟這 index.htm 檔案, 就會開啟第二個視窗及載入第二個 index.htm 檔案, 當這第二個 index.htm 開啟時, 會自動開啟第三個視窗及載入第三個 index.htm, 這連鎖反應會一路繼續, 子視窗不停開啟, 觀看者惟有按電腦面板的 [Reset] 鍵或關上電源來中止這反應。
圖 2-4 子視窗載入父視窗的網頁就會引發連鎖反應
假若你在 index.htm 內將上句改為這樣:
這也有一個連鎖反應, 第二個開啟的子視窗名為 window2, 前面一段說過, 這是子視窗作網頁連結用的名稱 (這也是自訂名稱), 若有這名稱, 新網頁會載入這子視窗, 因其後所有子視窗都是與 window2 連結, 所以會在同一的子視窗出現 (若無這名稱就會開啟一個新視窗), 這情況不會引致當機, 只要關閉子視窗就可停止這連鎖反應。
在前個練習, 你看過父視窗開啟時, 會同時開啟一個子視窗, 在這處, 請你看看開啟兩個 (或更多) 子視窗的操作。
1. 請你開啟示範磁碟中的 , 這網頁開啟時, 會同時開啟兩個子視窗。這 open2.htm 與前個練習的 open1.htm 相似, 主要是在 script 中加多一個子視窗, 如下:
This is parent window: open2.htm
2. 因這兩個子視窗是同樣大小, 所以第二個子視窗會疊在第一個子視窗之上, (IE-6 可能防止重疊, IE-5 不能), 請你關閉或拉開第二個子視窗, 就會看到第一個子視窗, 有很多網頁用這方法強迫你多看一段廣告。 (我們可以用 window.moveTo() 這個 method 將第二個子視窗稍為移位, 就可確保不會重疊。)
(另一個方法強迫你看多段廣告是用 onUnload 的方法, 你關閉一個視窗就會開啟另一個視窗, 請看 event handlers 的一章。)
這例子將兩個子視窗分別命名為 extawin2 及 extrawin1, 所以會分別開啟兩個子視窗。
練習-2.3 開啟兩個同名的子視窗
在前個練習的示範, 兩個子視窗有不同的連結視窗名稱 (分別為 extrawin1 和 extrawin2), 假若我們將兩個子視窗都給予同一名稱, 會有什麼效果呢?
1. 請你開啟示範磁碟中的 , 這網頁與前個練習的 open2.htm 相似, 主要是將兩個子視窗給予同一名稱, 如下:
This is parent window:open3.htm
2. 請你留意走出來的有多少個子視窗。
3. 第二個 window.open( ) 的屬性與第一個的不同,
請你看看第二個 window.open( ) 是否能改變第一個 window.open( )
的設定。
(用滑鼠右鍵按一下第二個子視窗, 在出現的功能表中選 [上一頁],
就可看到第一個子視窗。)
第一個 window.open("promo2.htm","extawin2 ") 會將 promo2.htm 載入一個名為 extrawin2 的子視窗內, 若當時無 extawin2 這子視窗, 就會造出一個新的視窗, 所以會出現第一個子視窗。
第二個 window.open("promo1.htm","extawin2 ") 會將 promo1.htm 載入 extrawin2 這子視窗內, 因這子視窗已存在, 所以不會出現第二個子視窗, promo1.htm 會取代先前載入的 promo2.htm。
留意這處的 extrawin1、extrawin2 等名稱, 是子視窗用作連結用的名稱, 而前面說的 msgWin、adWin 等名稱是 JavaScript 中的識別名稱。
假若我們不給予子視窗一個連結用的名稱, window.open( ) 會造出一個新的子視窗, 例如以下的 script:
這會分別造出兩個子視窗來載入這兩個網頁。
前面說的 window.open( ) 都是將一個預先寫好的網頁 (例如 2promo1.htm、2promo2.htm 等等) 載入子視窗, 我們也可以在父視窗中, 利用 document.write( ) 將資料寫進子視窗, 請看以下例子。
請你開啟示範磁碟中的 , 這網頁有以下內容:
This is parent
window: winwrite.htm
請你留意在子視窗出現的文字。
1. 在上述例子, 請先留意這句:
這處的 adwin 是在 JavaScript 中物件的 identifier (識別) 名稱, 是用來代表這子視窗作為 object 的名稱。在第一章說過, JavaScript 的操作是以物件為本, 我們要利用 JavaScript 來操控這子視窗, 就要先給這子視窗一個 object 的識別名稱 , 這就是這處的 adwin。
我們是使用 assignment ( = ) 的方式來給予物件一個 object 名稱, 在 " = " 左方的名稱是用來代表 " = " 右方的物件, 所以 adwin 就代表了右方用 window.open( ) 開啟的子視窗。
2. 子視窗有了一個 object 名稱, 我們就可以用 object.method( ) 這方式來操作這 object, 請看這幾句:
adwin.document.open( );
adwin.document.write("
");
adwin.document.write("Find your computer books here.
");
adwin.document.write("
這處首先用 adwin.document.open( ) 在 adwin 視窗內開啟一個網頁, 然後用 adwin.document.write( ) 將資料寫進 adwin 這子視窗, 最後用 adwin.document.close( ) 來結束這網頁, 在子視窗出現的是以下文字, 這就是你看到的網頁:
Find your computer books here.
3. 留意在網頁有這一句:
document.write("Test:
This should appear in the parent window. ")
這一句完整是: window.document.write(" Test: This . . . . .")
這 window 是指目前工作中的視窗, 所以隨後右方的文字會寫在父視窗。我們也可略去 window 這指示, 因為無指明目標, 就會以程式所在的視窗為目標。
在前面的例子, 你看到如何給予子視窗一個識別名稱, 例如 msgWin、adwin 等等, 我們使用這名稱, 就可在父視窗中改變子視窗的 property。假若我們要在子視窗改變父視窗的 property, 就要在子視窗中使用父視窗的識別名稱。
在子視窗中, 父視窗的識別名稱是 opener, 即是開啟這子視窗的來源視窗, 請看以下例子。
在這例子, 你開啟一個視窗後, 這視窗會開啟一個子視窗, 子視窗中有一個按鈕, 按一下就會將父視窗的背景顏色變為黃色。
1. 請開啟示範磁碟中的 , 這網頁有以下內容:
2. 網頁開啟後, 會出現一個子視窗, 上有一個按鈕, 請你按一下這按鈕, 就會看到父視窗的背景顏色變為黃色。
1. 首先看 with(msgWin.document) 這句, 這表示在隨後的 { } 範圍內, 全部 methods 都是屬於 msgWin.document 這 object, 例如 write( ) 是等於 msgWin.document.write( ), 這就可減少編寫的工夫, 有關 with statement 的使用, 請看 6.11 的一節。
2. 父視窗中的 msgWin.document.write( ) 是將一個網頁寫進子視窗, 在這例子, 你在子視窗開啟後, 在功能列中選看原始檔案, 就會見子視窗的網頁有以下內容:
網頁在原稿上是不用分行的, 若將這網頁分行, 就會有以下內容:
改變父視窗背景顏色
3. 留意父視窗網頁中這一句:
onClick=\'window.opener.document.bgColor=\"yellow\" \'
在 1.8-2 的一段說過, \ 是用來將隨後的字符作為文字之用, 而不是作操作之用, 所以這處的 " 及 ' 會寫進子視窗的網頁, 而不是作為父視窗的操作字符。
4. 在子視窗的按鈕, 產生作用的是以下一句:
window.opener.document.bgColor="yellow"
這處的 window 是子視窗 (即是 msgWin ), 這子視窗的來源視窗是 opener, 所以 window.opener 就是指父視窗。
Q-2.2 在第 1 章, 你看過如何利用按鈕改變一個網頁的背景顏色, 現在請你造出以下效果:
a) 造出一個名為 Q2-1.htm 的網頁 (這是父視窗的網頁), 這網頁開啟時會彈出一個子視窗。
b) 子視窗高度約為 150 pixel, 寬度約為 300 pixel, 沒有任何功能列或工具列等附件, 但可以改變大小。
c) 子視窗的網頁中有兩個按鈕, 按其中一個按鈕使父視窗的網頁背景變黃色, 按另一個按鈕使父視窗的網頁背景變藍色。
c) 在父視窗的網頁中也有兩個按鈕, 按其中一個按鈕使子視窗的網頁背景變黃色, 按另一個按鈕使子視窗的網頁背景變藍色。
在 JavaScript, 我們經常要造出一個按鈕, 觀看者按這按鈕, 就可啟動一些反應, 造出按鈕有以下兩個方法。
2. 使用 type="button" 可設定一個按鈕。
3. button 是這物件的類別名稱, 若有一些操作要牽涉到個別的按鈕, 就要給予該按鈕個別的識別名稱 (請參看第一章 ), 例如 name="buttonA" , 這按鈕就命名為 buttonA。若不要這名稱, 可簡為 name=""。
4. value="文字" 是我們可以在按鈕上放下的文字。
5. onClick="反應" 是我們設定的反應, 這可以是 method、 function 或 assignment。
在 HTML 範圍中使用 標籤可以直接造出一個按鈕, 但這不是標準 JavaScript 語法, 只在 IE-4/5/6 的瀏覽器 有效, 因目前大部份都已使用這列瀏覽器, 所以我們不用顧慮兼容的問題, 這方法不用設定 的元件, 較為簡單, 本書隨後主要使用這方式。
例如以下設定:
請按一下
這處的 是設定這按鈕被按一下就出現的反應。
Q-2.3 請你造出這網頁, 試試這按鈕的反應。
在前面的例子, 子視窗都是自動開啟的, 在這處, 你看到如何造出一個按鈕, 然後讓觀看者利用這按鈕來選擇開啟或關閉視窗, 使用的 method 是 open( ) 和 close( )。
這例子是在一個視窗中設定一個按鈕, 按一下就會開啟一個子視窗和在這子視窗中載入一個檔案。
請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:
最新訊息
網頁開啟後, 請你按這按鈕, 看走出來的子視窗。
1. 請你留意按鈕的 onClick=" " 設定:
onClick="msgWin = window.open('promo1.htm','win2 ', 'width=400,height=200')";
當觀看者按一下按鈕 ( onClick), 就會啟動以下反應:
msgWin = window.open('promo1.htm' , 'win2' , 'width=400,height=200');
這會啟動 window.open( ) 這個 method , 開啟一個子視窗, 並給予這子視窗 msgWin 的 object 名稱。(請看前面數節中的解釋。)
2. 在這處, 請你留意單/雙引號的使用 (請看 1.9 的一段), 在 練習 2.5, 你看到有些引號要有 \ 在前, 這處則沒有, 原因是該處是屬於 JavaScript 範圍, 這處是屬於 HTML 範圍。
1. 請將 button2.htm 和 promo1.htm 存在你電腦的硬碟中。(有關儲存網頁檔案的方法, 請看 Q-2.1)
2. 在 button2.htm 這檔案已有一個按鈕, 是用來開啟一個子視窗和載入 promo1.htm, 請你在 button2.htm 內加 多一個按鈕, 按一下可關閉這子視窗。
我們可以在子視窗中加入一個按鈕, 子視窗開啟後, 按一下就可關閉這子視窗, 父視窗不受影響。
1. 請依 Q-2.4 的指示 將 button2.htm 和 promo1.htm 存在你電腦的硬碟中。
2. 請在 promo1.htm 這檔案內加入一個按鈕, 是用來關閉這子視窗。
3. 當開啟 button2.htm (父視窗) 後, 按父視窗的 [最新訊息] 按鈕, 就會出現 promo1.htm 這子視窗, 請你在 promo1.htm 這子視窗中, 在你新加入的按鈕中按一下來關閉子視窗, 若你的設定正確, 這子視窗就會關閉。
我們是否能利用按鈕來關閉父視窗呢? 請你看以下練習。
1. 請依 Q-2.4 的指示 將 button2.htm 和 promo1.htm 存在你電腦的硬碟中, 然後跟 Q-2.5 的指示, 在 promo1.htm 加入一個 window.close( ) 的按鈕。
2. 在 Q-2.5 你應試驗過, 開啟 button2.htm 這父視窗, 在按鈕中按一下就可開啟 promo1.htm 這子視窗, 若你有完成 Q-2.5 的練習, 子視窗應有一個按鈕, 按一下就可立刻關閉子視窗。
3. 從 Q-2.5 的練習, 你可看到, 在子視窗 (或父視窗) 的按鈕, 是可直接關閉子視窗。
4. 請你用瀏覽器 直接 開啟 promo1.htm , 今次 promo1.htm 是父視窗,
請你按網頁中的按鈕, 看今次出現什麼結果。 (在 IE-4/5/6, 都會有 confirm 對話盒要你確定是否關閉這視窗。)
我們在一個網頁放下一個按鈕, 這按鈕有 onClick="window.close( )" 的程式碼, 若這網頁是以 JavaScript 來開啟的, 例如用 window.open( ) 來開啟的, 按這按鈕可以直接關閉這網頁所在這瀏覽器視窗, 不會有要觀看者確定的對話盒。但若直接用瀏覽器開啟這網頁, 按這按鈕就會有確定對話盒出現。
假若用 target=_blank 來開啟上述例子的 promo1.htm , 又會如何? 例如在 button2.htm 放下這連結: , 在 button2.htm 中按這連結來開啟 promo1.htm , 然後在 promo1.htm 中啟動 window.close( ) 的按鈕, 是否會有 confirm 的對話盒出現呢? 你有與趣請試試看。
這一章分兩頁: 第一頁完 ,
伍新華: 版權所有, 未經許可, 不得擅自複製或轉載,
如要引用, 請用連結方式。
