JavaScript: 開啟視窗


約瑟 發表



這個單元是本教學要介紹的兩個關於開啟視窗的其中之一。 這單元, 我們將會學到如何用 JavaScript 指令來開啟新視窗。 新視窗會顯示別的 HTML 文件。

下一個單元我們也是學開啟新視窗, 但是你將會學到如何用 function 來作。在此不多談, 我們先來些基礎的吧!



STEP1:【程式範例】
  1. 這是程式碼:

    <SCRIPT LANGUAGE="javascript">
    window.open('examples/javascript/06ex.html', 'Joseph', config='height=300,width=300')
    </SCRIPT>

  2. 執行結果就是你剛進入這一頁時候看到的小視窗。背後的大視窗顯示的是本篇教學。請注意:你現在看的這個程式只會開一個視窗而已。 視窗內的內容是獨立的, 包括裡面的連結和 JavaScript。(如: 視窗會自動關閉. 這個JavaScript 是根本頁的無關)


STEP2:【程式說明】
  1. 放置位置      我們現在開始討論之前的程式的放置位置。 大部分的程式設計者當你問他這個程式要放哪裡比較好, 他們可能都會告訴你說放越上面越好(像是放在<HEAD>裡面), 因為可以比較先讀取到程式。 但是現在 狀況就不同了。

    要是你要開另一個視窗, 把指令語法放在越下面越好。 應該說, 把它放在最下面。 理由簡單: 如果把 指令放在最後面, 網頁會先讀完才會讀取到指令。 要是你把指令放前面, 瀏覽器就會先讀取指令,在讀取主頁的內容。 大部分的人一看到會以為是廣告視窗, 還沒看就關掉了。這樣就失去意義了。

    那只是我的個人意見而已, 事實上, 你要放哪都可以。 只是讀者會不會受益的問題。

    window.open      這部分應該比較容易瞭解吧! window 就是只視窗(object). open 就是開啟(method)。 method 接在 object 後面。就這麼簡單。去看看格式大小吧!

  2. 視窗格式大小     

    請跟著以下的格式:

    ('視窗連結', '視窗名稱', config='視窗長寬大小')

    以下就是照上面指令的格式寫出來的:

    window.open('examples/javascript/06ex.html', 'Joseph', config='height=300,width=300')

  3. 10ex.html 是視窗的位置. 要是文件不在你的server就要用 http://
  4. Joseph是視窗的名稱. 等下你就知道他的重要性了。
  5. config要開啟的視窗的長度和寬度的大小。
  6. config指令      在此程式裡面, config 會開出一的 300 pixels 乘以 300 pixels 的視窗。

    唷, 對了! 最好把你的視窗大小比你想的要大一點, 因為每個人用的解析度不同的關係。

    注意 "height" 和 "width" 兩個指令是被逗號分開的, 兩個之間不能有空格 看到有一個單引號 (') 圍著高和寬的指令沒有? 原因是因為它們兩個都是 config 的-指令(subcommands), 所以他們要一起運作。 假如中間有空格, 瀏覽器會以為程式已經結束。 錯誤。

    可以用在config指令裡面的 副指令 有非常的多。 他們都是以數字(0,1)和 yes, no 來執行的。 以下就有幾個例子:

  7. toolbar: 指定要不要有工具列在視窗出現。(工具列包含 "前一頁" "下一頁" "停止" "重 新整理")
  8. menubar: 指定要不要有目錄列在視窗出現。(目錄列包括 "檔案" "編輯" "檢視")
  9. scrollbar: 指定要不要有下拉軸在視窗出現。
  10. resizable: 指定要不要讓訪客可自行種視窗大小。
  11. location: 指定要不要有"輸入網址的那一列"在視窗出現。
  12. directories: 指定要不要有directory bar 在視窗出現。 (像是有 "bookmark" 的那一列)
  13. status: 指定要不要有狀態列在視窗出現。 (最底下的這個列, 常常有人放跑馬燈的地方)
  14. ㄟ? 可不可以不要標題列啊? 答案是"不行"。

  15. 新視窗裡的標籤      之前跳出來的那個視窗裡, 我放了兩個連結. 還一個漂亮的粉紅色背景。

    第一個連結, 我把他連到我的首頁. 以下是程式碼:

    <A HREF="http://come.to/Joseph2001.com" TARGET="main"></A>

    你知不知道本頁的名稱叫做 "main"? 我在以上的連結打入 TARGET="main", 就是較瀏覽器開啟這一頁 連結的時候會在本頁的框架下顯示。 TARGET 幫助 HREF 這個指令知道要再哪一頁 Load 網頁。

    但是 要是我想把連結連到小視窗裡面要怎麼半? 記得我之前把這個視窗叫做 "Joseph" 嗎? 沒錯! 就是在 TARGET= 後面加入 Joseph。

  16. 關閉視窗      再小視窗裡面第二個連結就是這一個。 以下是語法:

    <A HREF="" onClick="window.close()">關閉視窗</A>

    這個基本的 HREF 連結是不是沒有連結在裡面? 這就是我們要的, 我們不希望關閉視窗後再開啟另一個 視窗啊! 關閉視窗的指令是 onClick="window.close" 這一個東西。 很簡單吧! close 就是關閉。
    close 這個指令命令 window 這個 property 關起來。

  17. 還有一件事就是, 要是你不希望人家一進來就看到小視窗要如何用? 語法如下:

    <A HREF="10.html" onClick="window.open('examples/javascript/06ex.html', 'Joseph', config='height=300,width=300')">按一下這裡開小視窗</A>

    按一下這裡開小視窗

    有沒有注意到, HREF 根本就連到自己嗎! 這樣開啟一個視窗後才不會影響的本頁。當然你可以加別的連結 在裡面, 只不過當你按下連結文字時, 他會掀開一個小視窗, 在跑到另一頁。

    這單元的教學有沒有看懂呢? 如果沒有的話, 趕快把以上的範例解釋複習一便, 應該會更了解吧! 趕快複習, 打鐵要趁熱!

    最後更新日期: 7/9/2001 10:15:57 AM