經常上網的朋友可能會到過這樣一些網站一進入首頁立刻會彈出一個窗口或者按一個連接或按鈕彈出通常在這個窗口裡會顯示一些注意事項版權信息警告歡迎光顧之類的話或者作者想要特別提示的信息其實制作這樣的頁面效果非常的容易只要往該頁面的HTML裡加入幾段Javascript代碼即可實現下面俺就帶您剖析它的奧秘
最基本的彈出窗口代碼
其實代碼非常簡單
< SCRIPT LANGUAGE=javascript>
< !
windowopen (l)
>
< /SCRIPT>
因為這是一段Javascript代碼所以它們應該放在< SCRIPT LANGUAGE=javascript>之間 < ! 和 >是對一些版本低的浏覽器起作用在這些老浏覽器中不會將標簽中的代碼作為文本顯示出來要養成這個好習慣啊
windowopen (l) 用於控制彈出新的窗口l如果l不與主窗口在同一路徑下前面應寫明路徑絕對路徑//)和相對路徑(/)均可
用單引號和雙引號都可以只是不要混用
這一段代碼可以加入HTML的任意位置< head>和< /head>之間可以< body>間< /body>也可以越前越早執行尤其是頁面代碼長又想使頁面早點彈出就盡量往前放 也可以越前越早執行尤其是頁面代碼長又想使頁面早點彈出就盡量往前放
經過設置後的彈出窗口
下面再說一說彈出窗口的設置只要再往上面的代碼中加一點東西就可以了我們來定制這個彈出的窗口的外觀尺寸大小彈出的位置以適應該頁面的具體情況
< SCRIPT LANGUAGE=javascript>
< !
windowopen (l newwindow height= width= top= left= toolbar=no menubar=no scrollbars=no resizable=nolocation=no status=no)
//寫成一行
>
< /SCRIPT>
參數解釋
< SCRIPT LANGUAGE=javascript> js腳本開始
windowopen 彈出新窗口的命令
l 彈出窗口的文件名
newwindow 彈出窗口的名字（不是文件名）非必須可用空代替
height= 窗口高度
width= 窗口寬度
top= 窗口距離屏幕上方的象素值
left= 窗口距離屏幕左側的象素值
toolbar=no 是否顯示工具欄yes為顯示
menubarscrollbars 表示菜單欄和滾動欄
resizable=no 是否允許改變窗口大小yes為允許
location=no 是否顯示地址欄yes為允許
status=no 是否顯示狀態欄內的信息（通常是文件已經打開）yes為允許
< /SCRIPT> js腳本結束
用函數控制彈出窗口
下面是一個完整的代碼
< html>
< head>
< script LANGUAGE=JavaScript>
< !
function openwin() {
windowopen (l newwindow height= width= 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()> 浏覽器離開頁面時彈出窗口
方法三用一個連接調用< a # onclick=openwin()>打開一個窗口< /a>
注意使用的#是虛連接
方法四用一個按鈕調用< input type=button onclick=openwin() value=打開窗口>
同時彈出個窗口
對源代碼稍微改動一下
< script LANGUAGE=JavaScript>
< !
function openwin() {
windowopen (l newwindow height= width= top= left=toolbar=no menubar=no scrollbars=no resizable=no location=no status=no)
//寫成一行
windowopen (l newwindow height= width= top= left=toolbar=no menubar=no scrollbars=no resizable=no location=no status=no)
//寫成一行
}
//>
< /script>
為避免彈出的個窗口覆蓋用top和left控制一下彈出的位置不要相互覆蓋即可最後用上面說過的四種方法調用即可
注意個窗口的name(newwindows和newwindow)不要相同或者干脆全部為空OK？
主窗口打開文件同時彈出小窗口l
如下代碼加入主窗口< head>區
< script language=javascript>
< !
function openwin() {
windowopen(lwidth=height=)
}
//>
< /script>
加入< body>區
< a onclick=openwin()>open< /a>即可
彈出的窗口之定時關閉控制
下面我們再對彈出的窗口進行一些控制效果就更好了如果我們再將一小段代碼加入彈出的頁面(注意是加入到l的HTML中可不是主頁面中否則)讓它秒後自動關閉是不是更酷了？
首先將如下代碼加入l文件的< head>區
< script language=JavaScript>
function closeit() {
setTimeout(selfclose()) //毫秒
}
< /script>
然後再用< body onload=closeit()> 這一句話代替l中原有的< BODY>這一句就可以了(這一句話千萬不要忘記寫啊！這一句的作用是調用關閉窗口的代碼秒鐘後就自行關閉該窗口)
在彈出窗口中加上一個關閉按鈕
< FORM>
< INPUT TYPE=BUTTON VALUE=關閉 onClick=windowclose()>
< /FORM>
呵呵現在更加完美了！
內包含的彈出窗口－－一個頁面兩個窗口
上面的例子都包含兩個窗口一個是主窗口另一個是彈出的小窗口通過下面的例子你可以在一個頁面內完成上面的效果
< html>
< head>
< SCRIPT LANGUAGE=JavaScript>
function openwin()
{
OpenWindow=windowopen( newwin height= width=toolbar=noscrollbars=+scroll+menubar=no);
//寫成一行
OpenWindowdocumentwrite(< TITLE>例子< /TITLE>)
OpenWindowdocumentwrite(< BODY BGCOLOR=#ffffff>)
OpenWindowdocumentwrite(< h>Hello!< /h>)
OpenWindowdocumentwrite(New window opened!)
OpenWindowdocumentwrite(< /BODY>)
OpenWindowdocumentwrite(< /HTML>)
OpenWindowdocumentclose()
}
< /SCRIPT>
< /head>
< body>
< a # onclick=openwin()>打開一個窗口< /a>
< input type=button onclick=openwin() value=打開窗口>
< /body>
< /html>
看看OpenWindowdocumentwrite()裡面的代碼不就是標准的HTML嗎？只要按照格式寫更多的行即可千萬注意多一個標簽或少一個標簽就會出現錯誤記得用OpenWindowdocumentclose()結束啊
終極應用彈出的窗口之Cookie控制
回想一下上面的彈出窗口雖然酷但是有一點小毛病(沉浸在喜悅之中一定沒有發現吧？)比如你將上面的腳本放在一個需要頻繁經過的頁面裡(例如首頁)那麼每次刷新這個頁面窗口都會彈出一次是不是非常煩人？:(
有解決的辦法嗎？當然有！我們使用cookie來控制一下就可以了首先將如下代碼加入主頁面HTML的< HEAD>區
< script>
function openwin(){
windowopen(lwidth=height=)
}
function get_cookie(Name) {
var search = Name + = var returnvalue = ;
if (okielength > ) {
offset = okieindexOf(search)
if (offset != ) {
offset += searchlength
end = okieindexOf(; offset);
if (end == )
end = okielength;
returnvalue=unescape(okiesubstring(offset end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie(popped)==){
openwin()
okie=popped=yes
}
}
< /script>
然後用< body onload=loadpopup()>（注意不是openwin而是loadpop啊！）替換主頁面中原有的< BODY>這一句即可你可以試著刷新一下這個頁面或重新進入該頁面窗口再也不會彈出了真正的PopOnlyOnce！
寫到這裡彈出窗口的制作和應用技巧基本上算是完成了俺也累壞了一口氣說了這麼多希望對正在制作網頁的朋友有所幫助俺就非常欣慰了
需要注意的是JS腳本中的的大小寫最好前後保持一致
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25256.html
