這個單元是本教學要介紹的兩個關於開啟視窗的其中之一。 這單元, 我們將會學到如何用 JavaScript 指令來開啟新視窗。 新視窗會顯示別的 HTML 文件。
下一個單元我們也是學開啟新視窗, 但是你將會學到如何用 function 來作。在此不多談, 我們先來些基礎的吧!
STEP1:【程式範例】
- 這是程式碼:
<SCRIPT LANGUAGE="javascript">
window.open('examples/javascript/06ex.html', 'Joseph', config='height=300,width=300')
</SCRIPT> - 執行結果就是你剛進入這一頁時候看到的小視窗。背後的大視窗顯示的是本篇教學。請注意:你現在看的這個程式只會開一個視窗而 已。 視窗內的內容是獨立的, 包括裡面的連結和 JavaScript。(如: 視窗會自動關閉. 這個JavaScript 是根本頁的無關)
STEP2:【程式說明】
- 放置位置
我們現在開始討論之前的程式的放置位置。 大部分的程式設計者當你問他這個程式要放哪裡比較好,
他們可能都會告訴你說放越上面越好(像是放在<HEAD>裡面), 因為可以比較先讀取到程式。 但是現在
狀況就不同了。
要是你要開另一個視窗, 把指令語法放在越下面越好。 應該說, 把它放在最下面。 理由簡單: 如果把 指令放在最後面, 網頁會先讀完才會讀取到指令。 要是你把指令放前面, 瀏覽器就會先讀取指令,在讀取主頁的內容。 大部分的人一看到會以為是廣告視窗, 還沒看就關掉了。這樣就失去意義了。
那只是我的個人意見而已, 事實上, 你要放哪都可以。 只是讀者會不會受益的問題。
window.open 這部分應該比較容易瞭解吧! window 就是只視窗(object). open 就是開啟(method)。 method 接在 object 後面。就這麼簡單。去看看格式大小吧!
- 視窗格式大小
請跟著以下的格式:
('視窗連結', '視窗名稱', config='視窗長寬大小')
以下就是照上面指令的格式寫出來的:
window.open('examples/javascript/06ex.html', 'Joseph', config='height=300,width=300')
- 10ex.html 是視窗的位置. 要是文件不在你的server就要用 http://
- Joseph是視窗的名稱. 等下你就知道他的重要性了。
- config要開啟的視窗的長度和寬度的大小。
- config指令
在此程式裡面, config 會開出一的 300 pixels 乘以 300 pixels 的視窗。
唷, 對了! 最好把你的視窗大小比你想的要大一點, 因為每個人用的解析度不同的關係。
注意 "height" 和 "width" 兩個指令是被逗號分開的, 兩個之間不能有空格 看到有一個單引號 (') 圍著高和寬的指令沒有? 原因是因為它們兩個都是 config 的副-指令(subcommands), 所以他們要一起運作。 假如中間有空格, 瀏覽器會以為程式已經結束。 錯誤。
可以用在config指令裡面的 副指令 有非常的多。 他們都是以數字(0,1)和 yes, no 來執行的。 以下就有幾個例子:
- toolbar: 指定要不要有工具列在視窗出現。(工具列包含 "前一頁" "下一頁" "停止" "重 新整理")
- menubar: 指定要不要有目錄列在視窗出現。(目錄列包括 "檔案" "編輯" "檢視")
- scrollbar: 指定要不要有下拉軸在視窗出現。
- resizable: 指定要不要讓訪客可自行種視窗大小。
- location: 指定要不要有"輸入網址的那一列"在視窗出現。
- directories: 指定要不要有directory bar 在視窗出現。 (像是有 "bookmark" 的那一列)
- status: 指定要不要有狀態列在視窗出現。 (最底下的這個列, 常常有人放跑馬燈的地方)
- 新視窗裡的標籤
之前跳出來的那個視窗裡, 我放了兩個連結. 還一個漂亮的粉紅色背景。
第一個連結, 我把他連到我的首頁. 以下是程式碼:
<A HREF="http://come.to/Joseph2001.com" TARGET="main"></A>
你知不知道本頁的名稱叫做 "main"? 我在以上的連結打入 TARGET="main", 就是較瀏覽器開啟這一頁 連結的時候會在本頁的框架下顯示。 TARGET 幫助 HREF 這個指令知道要再哪一頁 Load 網頁。
但是 要是我想把連結連到小視窗裡面要怎麼半? 記得我之前把這個視窗叫做 "Joseph" 嗎? 沒錯! 就是在 TARGET= 後面加入 Joseph。
- 關閉視窗
再小視窗裡面第二個連結就是這一個。 以下是語法:
<A HREF="" onClick="window.close()">關閉視窗</A>
這個基本的 HREF 連結是不是沒有連結在裡面? 這就是我們要的, 我們不希望關閉視窗後再開啟另一個 視窗啊! 關閉視窗的指令是 onClick="window.close" 這一個東西。 很簡單吧! close 就是關閉。
close 這個指令命令 window 這個 property 關起來。 - 還有一件事就是, 要是你不希望人家一進來就看到小視窗要如何用? 語法如下:
<A HREF="10.html" onClick="window.open('examples/javascript/06ex.html', 'Joseph', config='height=300,width=300')">按一下這裡開小視窗</A>
有沒有注意到, HREF 根本就連到自己嗎! 這樣開啟一個視窗後才不會影響的本頁。當然你可以加別的連結 在裡面, 只不過當你按下連結文字時, 他會掀開一個小視窗, 在跑到另一頁。
ㄟ? 可不可以不要標題列啊? 答案是"不行"。
留言列表
