閱讀(10.2k) 書(shū)簽贊(0) 我要糾錯(cuò)

javascript 控制彈出窗口

2018-08-12 14:06 更新

【1、最基本的彈出窗口代碼】
  　　
  　　<SCRIPT   LANGUAGE="javascript">
  　　
  　　</SCRIPT>

因?yàn)橹且欢蝚avascripts代碼，所以它們應(yīng)該放在<SCRIPT LANGUAGE="javascript">標(biāo)簽和</script>之間。是對(duì)一些版本低的瀏覽器起作用，在這些老瀏覽器中不會(huì)將標(biāo)簽中的代碼作為文本顯示出來(lái)。要養(yǎng)成這個(gè)好習(xí)慣啊。window.open ('page.html') 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應(yīng)寫(xiě)明路徑，絕對(duì)路徑(http://)和相對(duì)路徑(../)均可。用單引號(hào)和雙引號(hào)都可以，只是不要混用。這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執(zhí)行，尤其是頁(yè)面代碼長(zhǎng)，又想使頁(yè)面早點(diǎn)彈出就盡量往前放。

【2、經(jīng)過(guò)設(shè)置后的彈出窗口】

下面再說(shuō)一說(shuō)彈出窗口的設(shè)置。只要再往上面的代碼中加一點(diǎn)東西就可以了。我們來(lái)定制這個(gè)彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)該頁(yè)面的具體情況。

參數(shù)解釋?zhuān)?nbsp;

  　　
  　　<SCRIPT   LANGUAGE="javascript">   js腳本開(kāi)始；
  　　window.open   彈出新窗口的命令；
  　　'page.html'   彈出窗口的文件名；
  　　'newwindow'   彈出窗口的名字（不是文件名），非必須，可用空''代替；
  　　height=100   窗口高度；
  　　width=400   窗口寬度；
  　　top=0   窗口距離屏幕上方的象素值；
  　　left=0   窗口距離屏幕左側(cè)的象素值；
  　　toolbar=no   是否顯示工具欄，yes為顯示；
  　　menubar，scrollbars   表示菜單欄和滾動(dòng)欄。
  　　resizable=no   是否允許改變窗口大小，yes為允許；
  　　location=no   是否顯示地址欄，yes為允許；
  　　status=no   是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開(kāi)），yes為允許；
  　　</SCRIPT>   js腳本結(jié)束

  　　

【3、用函數(shù)控制彈出窗口】

下面是一個(gè)完整的代碼。
  　　<html>
  　　<head>
  　　<script   LANGUAGE="javascript">
  　　
  　　</script>
  　　</head>
  　　<body   onload="openwin()">
  　　任意的頁(yè)面內(nèi)容...
  　　</body>
  　　</html>

這里定義了一個(gè)函數(shù)openwin(),函數(shù)內(nèi)容就是打開(kāi)一個(gè)窗口。在調(diào)用它之前沒(méi)有任何用途。怎么調(diào)用呢？

  　　方法一：<body   onload="openwin()">   瀏覽器讀頁(yè)面時(shí)彈出窗口；
  　　方法二：<body   onunload="openwin()">   瀏覽器離開(kāi)頁(yè)面時(shí)彈出窗口；
  　　方法三：用一個(gè)連接調(diào)用：
  　　<a   href="#"   onclick="openwin()">打開(kāi)一個(gè)窗口</a>
  　　注意：使用的“#”是虛連接。
  　　方法四：用一個(gè)按鈕調(diào)用：
  　　<input   type="button"   onclick="openwin()"   value="打開(kāi)窗口">

  　
  　

【4、同時(shí)彈出2個(gè)窗口】

對(duì)源代碼稍微改動(dòng)一下：

<script   LANGUAGE="javascript">
  　　
  　　</script>
  　　為避免彈出的2個(gè)窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可   。最后用上面說(shuō)過(guò)的四種方法調(diào)用即可。
  　　注意：2個(gè)窗口的name(newwindows和newwindow2)不要相同，或者干脆全部為空。

【5、主窗口打開(kāi)文件1.htm，同時(shí)彈出小窗口page.html】

如下代碼加入主窗口<head>區(qū)：
  　　<script   language="javascript">
  　　
  　　</script>
  　　加入<body>區(qū)：
  　　<a   href="1.htm"   onclick="openwin()">open</a>即可。

【6、彈出的窗口之定時(shí)關(guān)閉控制】 　　

下面我們?cè)賹?duì)彈出的窗口進(jìn)行一些控制，效果就更好了。如果我們?cè)賹⒁恍《?nbsp; 代碼加入彈出的頁(yè)面(注意是加入page.html的HTML中，可不是主頁(yè)面中，否則 ...)，讓它10秒后自動(dòng)關(guān)閉是不是更酷了？

  首先，將如下代碼加入page.html文件的<head>區(qū)：
  　　<script   language="javascript">
  　　function   closeit()
  　　{
  　　setTimeout("self.close()",10000)   //毫秒
  　　}
  　　</script>
  　　然后，再用<body   onload="closeit()">   這一句話代替page.html中原有的<BODY>這一句就可以了。(這一句話千萬(wàn)不要忘記寫(xiě)?。∵@一句的作用是調(diào)用關(guān)閉窗   口的代碼，10秒鐘后就自行關(guān)閉該窗口。)

【7、在彈出窗口中加上一個(gè)關(guān)閉按鈕】

  　　<FORM>
  　　<INPUT   TYPE='BUTTON'   value='關(guān)閉'   onClick='window.close()'>
  　　</FORM>
  　　呵呵，現(xiàn)在更加完美了！

【8、內(nèi)包含的彈出窗口-一個(gè)頁(yè)面兩個(gè)窗口】

  　　上面的例子都包含兩個(gè)窗口，一個(gè)是主窗口，另一個(gè)是彈出的小窗口。通過(guò)下面的例子，你可以在一個(gè)頁(yè)面內(nèi)完成上面的效果。


  　　<html>
  　　<head>
  　　<SCRIPT   LANGUAGE="javascript">
  　　function   openwin()
  　　{
  　　OpenWindow=window.open("",   "newwin",   "height=250,   width=250,toolbar=no   ,scrollbars="+scroll+",menubar=no");
  　　//寫(xiě)成一行
  　　OpenWindow.document.write("<TITLE>例子</TITLE>")
  　　OpenWindow.document.write("<BODY   BGCOLOR=#ffffff>")
  　　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="#"   onclick="openwin()">打開(kāi)一個(gè)窗口</a>
  　　<input   type="button"   onclick="openwin()"   value="打開(kāi)窗口">
  　　</body>
  　　</html>

看看OpenWindow.document.write()里面的代碼不就是標(biāo)準(zhǔn)的HTML嗎？只要按照   格式寫(xiě)更多的行即可。千萬(wàn)注意多一個(gè)標(biāo)簽或少一個(gè)標(biāo)簽就會(huì)出現(xiàn)錯(cuò)誤。記得用   OpenWindow.document.close()結(jié)束啊。

【9、終極應(yīng)用--彈出的窗口之Cookie控制】

回想一下，上面的彈出窗口雖然酷，但是有一點(diǎn)小毛病(沉浸在喜悅之中，一定沒(méi)有發(fā)現(xiàn)吧？)比如你將上面的腳本放在一個(gè)需要頻繁經(jīng)過(guò)的頁(yè)面里(例如首頁(yè))，那么每次刷新這個(gè)頁(yè)面，窗口都會(huì)彈出一次，是不是非常煩人？:-(

有解決的辦法嗎？Yes! ;-) Follow me.我們使用cookie來(lái)控制一下就可以了。

首先，將如下代碼加入主頁(yè)面HTML的<HEAD>區(qū)：

  　　<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?。。┨鎿Q主頁(yè)面中原有的<BODY>這一句即可。你可以試著刷新一下這個(gè)頁(yè)面或重新進(jìn)   入該頁(yè)面，窗口再也不會(huì)彈出了。真正的Pop-Only-Once！

javascript強(qiáng)制彈出新窗口實(shí)現(xiàn)代碼

讓javascript彈出窗口居前顯示的實(shí)現(xiàn)方法

一般來(lái)說(shuō)，顯示在最前面的窗口都是因?yàn)榇翱诒患せ瞰@得焦點(diǎn)，要使窗口永遠(yuǎn)顯示在最前面，可以人為的設(shè)置窗口在blur時(shí)立刻focus，或者用模式、無(wú)模式對(duì)話框?qū)崿F(xiàn)

具體步驟：

方法一：彈出窗口<body>里加上代碼：onblur="self.focus()"：
<body onblur="self.focus()">

方法二：用showModalDialog方法建立模式對(duì)話框，它的參數(shù)說(shuō)明如表1.5.2所示。
<script>
   function topwin(){
   window.showModalDialog(http://www.jb1.net,"","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
   }
</script>
<button onClick="topwin()">打開(kāi)模式窗口</button>

方法三：用showModelessDialog方法建立無(wú)模式對(duì)話框，它的參數(shù)跟模式對(duì)話框完全一樣，可以參考表1.5.2。
<script>
   function topwin(){
   window.showModelessDialog("http://www.jb51.net","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
   }
</script>
<button onClick="topwin()">打開(kāi)無(wú)模式窗口</button>

注意：模式對(duì)話框會(huì)始終保持焦點(diǎn)。除非關(guān)閉對(duì)話框，否則無(wú)法切換窗口。無(wú)模式對(duì)話框不會(huì)始終保持焦點(diǎn)，但始終保持顯示在最前端。

特別說(shuō)明
本例主要是模式對(duì)話框和無(wú)模式對(duì)話框的應(yīng)用，必須注意兩種對(duì)話框的異同。

表1.5.2 showModalDialog方法的參數(shù)列表
參數(shù)取值說(shuō)明
sURL必選項(xiàng)。字符串(String)。指定要載入和顯示的 URL。
vArguments可選項(xiàng)。字符串(String)。指定供顯示文檔時(shí)使用的變量。利用這個(gè)參數(shù)可以傳遞任何類(lèi)型的值，包括包含多個(gè)值得的數(shù)組。對(duì)話框可以通過(guò)調(diào)用程序從 window 對(duì)象的 dialogArguments 屬性提取這些值。
sFeatures可選項(xiàng)。字符串(String)。指定對(duì)話框的窗口裝飾。使用下面的值。多個(gè)之間用分號(hào)隔開(kāi)。
dialogHeight : sHeight設(shè)置對(duì)話框的高度
dialogLeft : sXPos設(shè)置對(duì)話框左上角相對(duì)于桌面的橫坐標(biāo)。
dialogTop : sYPos設(shè)置對(duì)話框左上角相對(duì)于桌面的縱坐標(biāo)。
dialogWidth : sWidth設(shè)置對(duì)話框的寬度。
center : yes | no | 1 | 0 | on | off指定對(duì)話框是否顯示于桌面正中。默認(rèn)值為 yes 。
dialogHide : yes | no| 1 | 0 | on | off指定當(dāng)打印或打印預(yù)覽時(shí)對(duì)話框是否隱藏。僅僅當(dāng)對(duì)話框是由被信任的程式打開(kāi)的時(shí)候此參數(shù)才可用。默認(rèn)值為 no 。
edge : sunken | raised指定對(duì)話框窗口邊框樣式為凹下還是凸起的。默認(rèn)值為 raised 。
help : yes | no | 1 | 0 | on | off指定對(duì)話框是否顯示上下文相關(guān)的幫助圖標(biāo)。默認(rèn)值為 yes 。
resizable : yes | no | 1 | 0 | on | off指定對(duì)話框是否可以被用戶(hù)改變尺寸。默認(rèn)值為 no 。
scroll : yes | no | 1 | 0 | on | off指定對(duì)話框是否顯示滾動(dòng)條。默認(rèn)值為 yes 。
status : yes | no | 1 | 0 | on | off指定對(duì)話框是否顯示狀態(tài)條。對(duì)于不被信任的對(duì)話框默認(rèn)值為 yes 。對(duì)于被信任的對(duì)話框默認(rèn)值為 no 。
unadorned : yes | no | 1 | 0 | on | off指定對(duì)話框是否顯示 chrome 樣式邊框。僅僅當(dāng)對(duì)話框是由被信任的程式打開(kāi)的時(shí)候此參數(shù)才可用。默認(rèn)值為 no 。

以上內(nèi)容是否對(duì)您有幫助：

← JavaScript 匿名函數(shù)及閉包

javascript重定向跳轉(zhuǎn) →

寫(xiě)筆記

我要補(bǔ)充