首頁 > 開發者 > JavaScript
【1、普通的快顯視窗】 <SCRIPT LANGUAGE=javascript> <!-- window.open ('page.html') --> </SCRIPT>
<!-- 和 -->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標籤中的代碼作為文本顯示
出來。用單引號和雙引號都可以，只是不要混用。
【2、經過設定後的快顯視窗】
<SCRIPT LANGUAGE=javascript> <!-- 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') //寫成一行 --> </SCRIPT>
參數解釋：
<SCRIPT LANGUAGE=javascript> js指令碼開始；
window.open 彈出新視窗的命令；
'page.html' 快顯視窗的檔案名稱；
'newwindow' 快顯視窗的名字，非必須，可用空''代替；
height=100 視窗高度；
width=400 視窗寬度；
top=0 視窗距離螢幕上方的象素值；
left=0 視窗距離螢幕左側的象素值；
toolbar=no 是否顯示工具列，yes為顯示；
menubar，scrollbars 表示功能表列和滾動欄。
resizable=no 是否允許改變視窗大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態列內的資訊（通常是檔案已經開啟），yes為允許；
</SCRIPT> js指令碼結束
【3、用函數控制快顯視窗】 下面是一個完整的代碼。 <html> <head> <script LANGUAGE=javascript> <!-- function openwin() { window.open (page.html, newwindow, height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no) //寫成一行 } //--> </script> </head> <body onload=openwin()> ..... </body> </html> 這裡定義了一個函數openwin(),怎麼調用呢。 方法一：<body onload=openwin()> 瀏覽器讀頁面時快顯視窗； 方法二：<body onunload=openwin()> 瀏覽器離開頁面時快顯視窗； 方法三：用連結調用： 方法四：用按鈕調用：
【4、同時彈出2個視窗】
對原始碼稍微改動一下： <script LANGUAGE=javascript> <!-- function openwin() { window.open (page.html, newwindow, height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no) //寫成一行 window.open (page2.html, newwindow2, height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no) //寫成一行 } //--> </script> 為避免彈出的2個視窗覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最後用上面說過 的四種方法調用即可。 注意：2個視窗的name(newwindows和newwindow2)不要相同，或者乾脆全部為空白。
【5、主視窗開啟檔案1.htm，同時彈出小視窗page.html】
如下代碼加入主視窗<head>區： <script language=javascript> <!-- function openwin() { window.open(page.html,,width=200,height=200) } //--> </script> 加入<body>區： <a href=http://www.mscto.com/JavaScript/1.
【6、彈出的視窗之定時關閉控制】
下面我們再對彈出的視窗進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面( 注意是加入到page.html的HTML中，可不是首頁面中，否則...)，讓它10秒後自動關閉是不是更酷了。 首先，將如下代碼加入page.html檔案的<head>區： <script language=javascript> function closeit() { setTimeout(self.close(),10000) //毫秒 } </script> 然後，再用<body onload=closeit()> 這一句話代替page.html中原有的<BODY>這一句就可以了。(這 一句話千萬不要忘記寫啊。這一句的作用是調用關閉視窗的代碼，10秒鐘後就自行關閉該視窗。)
【7、在快顯視窗中加上一個關閉按鈕】
<FORM> <INPUT TYPE='BUTTON' value='關閉' onClick='window.close()'> </FORM>
【8、內包含的快顯視窗-一個頁面兩個視窗】
通過下面的例子，你可以在一個頁面內完成上面的效果。 軟體開發網 www.mscto.com <html> <head> <SCRIPT LANGUAGE=javascript> function openwin() { OpenWindow=window.open(, newwin, height=250, width=250,toolbar=no,scrollbars=+scroll+,menubar=no); //寫成一行 OpenWindow.document.write(<TITLE>例子</TITLE>) OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Hello!</h1>) OpenWindow.document.write(New window opened!) OpenWindow.document.write(</BODY>) OpenWindow.document.write(</HTML>) OpenWindow.document.close() } </SCRIPT> </head> <body> <a href=http://www.mscto.com/JavaScript/<input type=button onclick=openwin() value=開啟視窗> </body> </html> 看看 OpenWindow.document.write()裡面的代碼不就是標準的HTML嗎。只要按照格式寫更多的行即 可。千萬注意多一個標籤或少一個標籤就會出現錯誤。記得用OpenWindow.document.close()結束啊。 【9、彈出的視窗之Cookie控制】
回想一下，上面的快顯視窗雖然酷，但是有一點小毛病。比如你將上面的指令碼放在一個需要頻繁經 過的頁面裡(例如首頁)，那麼每次重新整理這個頁面，視窗都會彈出一次，是不是非常煩人。:-( 解決辦法： 我們使用cookie來控制一下就可以了。首先，將如下代碼加入首頁面HTML的<HEAD>區： <script> function openwin(){ window.open(page.html,,width=200,height=200) } function get_cookie(Name) { var search = Name + = var returnvalue = ; if (documents.cookie.length > 0) { offset = documents.cookie.indexOf(search) if (offset != -1) { offset += search.length end = documents.cookie.indexOf(;, offset); if (end == -1) end = documents.cookie.length; returnvalue=unescape(documents.cookie.substring(offset, end)) } } return returnvalue; } function loadpopup(){ if (get_cookie('popped')==''){ openwin() documents.cookie=popped=yes } } </script> 然後，用<body onload=loadpopup()>（注意不是openwin而是loadpop啊。）替換首頁面中原有的 <BODY>這一句即可。你可以試著重新整理一下這個頁面或重新進入該頁面，視窗再也不會彈出了。真正的 Pop-Only-Once。 完畢。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
