一、window.open()支援環境: JavaScript1.0 /JScript1.0 /Nav2 /IE3 /Opera3
二、基本語法: window.open(pageURL,name,parameters)
其中:
pageURL 為子視窗路徑
name 為子視窗句柄
parameters 為視窗參數(各參數以逗號分隔)
三、範例:
程式碼如下:
<script> <BR><!-- <BR>window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar =no,scrollbars=no, resizable=no,location=no, status=no') <BR>//寫成一行<BR>--> <BR></script>
腳本運行後,page.html將在新窗體newwindow中打開,寬為100,高為400,距屏頂0像素,屏左0像素,無工具條,無菜單條,無滾動條,不可調整大小,無網址列,無狀態列。請對照。
上例中涉及的為常用的幾個參數,除此之外還有許多其他參數,請見四。
四、各項參數
其中yes/no也可使用1/0;pixel value為具體的數值,單位像素。
參數| 取值範圍| 說明
alwaysLowered | yes/no | 指定視窗隱藏在所有視窗之後
alwaysRaised | yes/no | 指定視窗懸浮在所有視窗之後
alwaysRaised | yes/no | 指定視窗懸浮在所有視窗之上
depended | yes/no | 是否和父視窗同時關閉
directories | yes/no | Nav2和3的目錄列是否可見
height | pixel value | 視窗高度
hotkeys | yes/no |在沒選單列的視窗中設安全退出熱鍵
innerHeight | pixel value | 視窗中文件的像素高度
innerWidth | pixel value | 視窗中文件的像素寬度
location | yes/no | 位置欄位是否可見
menubar | yes/no | 選單列是否可見
outerHeight | pixel value | 設定視窗(包括裝飾邊框)的像素高度
outerWidth | pixel value | 設定視窗(包括裝飾邊框)的像素寬度
resizable | yes/no | 視窗大小是否可調整
screenX | pixel value | 視窗距螢幕左邊界的像素長度
screenY | pixel value | 視窗距螢幕上邊界的像素長度
screenY | pixel value | 視窗距螢幕上邊界的像素長度
scrollbars | yes/no | 視窗是否可有滾動列
titlebar | yes/no | 視窗題目列是否可見
toolbar | yes/no | 視窗工具列是否可見
Width | pixel value | 視窗的像素寬度
z-look | yes/no | 視窗啟動後是否浮在其它視窗之上
================= ====================================
【1、最基本的彈出窗口程式碼】
其實程式碼很簡單:複製程式碼
程式碼如下:
程式碼如下:
因為著是一段javascripts程式碼,所以它們應該放在之間。 是對某些版本低的瀏覽器起作用,在這些舊瀏覽器中不會將標籤中的程式碼顯示為文字。要養成這個好習慣。
Window.open ('page.html') 用來控制彈出新的視窗page.html,如果page.html不與主視窗在同一路徑下,前面應寫明路徑,絕對路徑(http:// )和相對路徑(../)均可。用單引號和雙引號都可以,但不要混用。
這段程式碼可以加入HTML的任意位置,和之間可以,間也可以,越前越早執行,尤其是頁面程式碼長,又想使頁面早點彈出就盡量往前放。
【2、經過設定後的彈出視窗】
下面再說一說彈出視窗的設定。只要再往上面的程式碼加一點東西就可以了。
我們來客製化這個彈出的視窗的外觀,尺寸大小,彈出的位置以適應該頁面的具體情況。 複製程式碼
程式碼如下:
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable =no,location=no, status=no')
//寫成一行
-->
參數解釋:
js腳本結束
【3、用函數控制彈出視窗】
下面是完整的程式碼。
…任意的頁面內容…
這裡定義了一個函數openwin(),函數內容就是開啟一個視窗。在調用它之前沒有任何用途。
怎麼呼叫呢?
方法一: 瀏覽器讀取頁面時彈出視窗;
方法二: 瀏覽器離開頁面時彈出視窗;
方法三:用一個連線呼叫:
開啟一個視窗
注意:使用的"#"是虛連接。
方法四:用一個按鈕呼叫:
【4、同時彈出2個視窗】
對源代碼稍微改動一下:
為避免彈出的2個視窗覆蓋,用top和left控制一下彈出的位置不要互相覆蓋即可。最後用上面說的四種方法呼叫即可。
注意:2個視窗的name(newwindows和newwindow2)不要相同,或乾脆全部為空。 OK?
【5、主視窗開啟檔案1.htm,同時彈出小視窗page.html】
以下程式碼加入主視窗區:
加入區:
open即可。
【6、彈出的視窗之定時關閉控制】
下面我們再對彈出的視窗進行一些控制,效果就更好了。如果我們再將一小段程式碼加入彈出的頁面(注意是加入到page.html的HTML中,可不是主頁面中,否則…),讓它10秒後自動關閉是不是更酷了?
首先,將下列程式碼加入page.html檔案的區:
然後,再用 這句話代替page.html中原有的這句話就可以了。 (這句話千萬不要忘記寫啊!這一句的作用是呼叫關閉視窗的程式碼,10秒鐘後就自行關閉該視窗。)
【7.在彈出視窗中加上一個關閉按鈕】
,現在更呵呵完美了!
【8、內包含的彈出窗口-一個頁面兩個窗口】
上面的例子都包含兩個窗口,一個是主窗口,另一個是彈出的小窗口。
透過下面的例子,你可以在一個頁面內完成上面的效果。
看看OpenWindow.document.write()裡面的程式碼不就是標準的HTML嗎?只要按照格式寫更多的行即可。千萬注意多一個標籤或少一個標籤就會出現錯誤。記得用OpenWindow.document.close()結束啊。
【9、終極應用--彈出的窗口之Cookie控制】
回想一下,上面的彈出窗口雖然酷,但是有一點小毛病(沉浸在喜悅之中,一定沒有發現吧? :-(有解決的方法嗎?Yes! ;-) Follow me.
我們使用cookie來控制一下就可以了。
首先,將下列程式碼加入主頁HTML的區:
<script> <BR>function openwin() <BR>{window.open("page.html","","width=200,height=200")} <BR>function get_cookie( Name) <BR>{var search = Name "=" <BR>var returnvalue = ""; <BR>if (document.cookie.length > 0) { <BR>offset = document.cookie.indexOf(search) <BR>if (offset != -1) { <BR>offset = search.length <BR>end = document.cookie.indexOf(";", offset); <BR>if (end == -1) <BR>end = document.cookie.length; <BR>returnvalue=unescape(document.cookie.substring(offset,end)) <BR>} <BR>} <BR>return returnvalue; <BR>} <BR>} <BR>return returnvalue; <BR>} <BR>function loadup (){ <BR>if (get_cookie('popped')==''){ <BR>openwin() <BR>document.cookie="popped=yes" <BR>} </script>
}
然後,用(注意不是openwin而是loadpop啊!)替換主頁中原有的這句話即可。你可以試著刷新這個頁面或重新進入該頁面,視窗再也不會彈出了。真正的Pop-Only-Once! 寫到這裡彈出視窗的製作和應用技巧基本上算是完成了,需要注意的是,JS腳本中的大小寫最好前後保持一致。