熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

javascript彈出窗口詳解

2022-06-13   來源: JSP教程 

　　一 彈出窗口的基本屬性設置

　　<SCRIPT LANGUAGE=javascript>

　　<!

　　windowopen (l newwindow height= width= top= left= toolbar=no menubar=no scrollbars=noresizable=nolocation=no status=no)

　　//寫成一行

　　>

　　</SCRIPT>

　　參數解釋

　　windowopen 彈出新窗口的命令

　　l 彈出窗口的文件名

　　newwindow 彈出窗口的名字（不是文件名）非必須可用空代替

　　 窗口高度

　　width= 窗口寬度

　　top= 窗口距離屏幕上方的象素值

　　left= 窗口距離屏幕左側的象素值

　　toolbar=no 是否顯示工具欄yes為顯示

　　menubarscrollbars 表示菜單欄和滾動欄

　　resizable=no 是否允許改變窗口大小yes為允許

　　location=no 是否顯示地址欄yes為允許

　　status=no 是否顯示狀態欄內的信息（通常是文件已經打開）yes為允許

　　二 彈啟一個全屏窗口

　　加入fullscreen

　　<SCRIPT LANGUAGE=javascript>

　　<!

　　windowopen (l newwindow fullscreen) //全屏了自然其他條件就都失效了

　　>

　　</SCRIPT>

　　三 打開一個和按F所見到的一樣的窗口

　　加入channelmode

　　<SCRIPT LANGUAGE=javascript>

　　<!

　　windowopen (l newwindow channelmode)

　　>

　　</SCRIPT>

　　四 打開一個連標題欄都沒有的窗口（無標題最小最大以及關閉按鈕）

　　<HTML><HEAD>

　　<META httpequiv=ContentType content=text/html; charset=gb>

　　<script language=javascript>

　　function unload()

　　{

　　var popUpSizeX=; //窗口的寬度

　　var popUpSizeY=; //窗口的高度

　　var popUpLocationX=;//距離左邊的距離 相當於 left

　　var popUpLocationY=;//距離頂端的距離 相當於 top

　　// URL of the popUp

　　var popUpURL=;; //打開頁面的路徑

　　// ** 下面的就不要隨便改了 ***

　　splashWin = windowopen(xfullscreen= scrollbars=autoresizable=);

　　splashWinblur(); // Hide while updating

　　windowfocus();

　　splashWinresizeTo(popUpSizeXpopUpSizeY);

　　splashWinmoveTo(popUpLocationXpopUpLocationY);

　　splashWinlocation=popUpURL;

　　}

　　// END

　　unload();

　　</script>

　　</HEAD>

　　<BODY></BODY></HTML>

　　看看什麼效果？ 如果把resizable 設為 scrollbars = no 呢？

　　五 沒有最大化按紐的窗口

　　其實也就是象軟件的關於我們的那個窗口一樣下面就是用對話框窗口來實現它

　　showModalDialog()以及showModelessDialog()

　　．用showModalDialog()

　　<html>

　　<SCRIPT LANGUAGE=javascript>

　　<!

　　showModalDialog(exampledialogWidth:px;dialogHeight:px;dialogLeft:px;dialogTop:px;center:yes;help:yes;resizable:yes;status:yes)

　　//>

　　</SCRIPT>

　　<b></b>

　　</body>

　　</html>

　　．用showModelessDialog()

　　<html>

　　<SCRIPT LANGUAGE=javascript>

　　<!

　　showModelessDialog(exampledialogWidth:px;dialogHeight:px;dialogLeft:px;dialogTop:px;center:yes;help:yes;resizable:yes;status:yes)

　　//>

　　</SCRIPT>

　　<b></b>

　　</body>

　　</html>

　　至於showModalDialog()與showModelessDialog()的區別在於showModalDialog()打開的窗口（簡稱模式窗口）置在父窗口上必須關閉才能訪問父窗口(建議盡量少用以免招人反感)showModelessDialog()（簡稱無模式窗口）打開後不必關閉也可訪問父窗口打開的窗口

　　現在我將這裡的一些參數說明一下

　　dialogHeight: iHeight 設置對話框窗口的高度

　　dialogWidth: iWidth 設置對話框窗口的寬度

　　dialogLeft: iXPos 設置對話框窗口相對於桌面左上角的left位置

　　dialogTop: iYPos 設置對話框窗口相對於桌面左上角的top位置

　　center: {yes | no | | } 指定是否將對話框在桌面上居中默認值是yes

　　help: {yes | no | | } 指定對話框窗口中是否顯示上下文敏感的幫助圖標默認值是yes

　　resizable: {yes | no | | } 指定是否對話框窗口大小可變默認值是no

　　status: {yes | no | | } 指定對話框窗口是否顯示狀態欄對於非模式對話框窗口默認值是yes對於模式對話框窗口默認值是 no

　　六 彈出n 個窗口

　　這很簡單只要執行n 次windowopen()就行了當然一定要給每個窗口起不同的名字

　　還有設置一下left和top避免重疊

　　七 刷新之後就不再彈出窗口

　　我們使用cookie來控制一下就可以了

　　首先將如下代碼加入主頁面HTML的<HEAD>區

　　<script>

　　function openwin(){

　　windowopen(lwidth=)

　　}

　　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>這一句即可你可以試著刷新一下這個頁面或重新進入該頁面窗口再也不會彈出了

　　八 讓彈出窗口適應裡面圖片的大小

　　很多時候我們需要提供這樣的功能給訪問者當訪問者點擊頁面中的縮略圖時其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看

　　實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接

　　<a target=_blank><img src=smalljpg></a>

　　其中<a>標記的href屬性指定全尺寸圖片的URLtarget屬性設置為_blank指定在新窗口中顯示該圖片<img>標記的src屬性指定縮略圖的URL

　　如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度寬度能與全尺寸圖片的大小匹配時）則可調用 windowopen 方法該方法接收三個參數分別指定要打開文件的URL窗口名及窗口特性在窗口特性參數中可指定窗口的高度寬度是否顯示菜單欄工具欄等以下代碼將顯示全尺寸圖片在一個沒有工具欄地址欄狀態欄菜單欄寬高分別為的窗口中

　　<a onClick=windowopen(thishref height=width=toolbar=nolocation=nostatus=nomenubar=no);return false><img src=smalljpg></a>

　　這裡就提出了個問題如果所有全尺寸圖片都具有統一的大小（比如都是x）那麼以上代碼適用於所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）但如果全尺寸圖片的大小並不統一還用以上代碼則我們需要先取得每幅全尺寸圖片的大小然後在windowopen方法的窗口特性參數中一一設置height 和width為正確的值在圖片數量較多的情況下這顯然效率太低了那麼是否有一勞永逸的方法即讓彈出窗口能自動適應要顯示圖片的大小？通過研究發現可以使用 DHTML 中的 Image 對象來達到我們的目的Image 對象可動態裝載指定的圖片通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小以此來設置彈出窗口的大小即可實現自適應圖片大小的彈出窗口了下面即是實現代碼:

　　<script language=javascript type=text/javascript>

　　<!

　　var imgObj;

　　function checkImg(theURLwinName){

　　// 對象是否已創建

　　if (typeof(imgObj) == object){

　　// 是否已取得了圖像的高度和寬度

　　if ((imgObjwidth != ) && (imgObjheight != ))

　　// 根據取得的圖像高度和寬度設置彈出窗口的高度與寬度並打開該窗口

　　// 其中的增量 和 是設置的窗口邊框與圖片間的間隔量

　　OpenFullSizeWindow(theURLwinName width= + (imgObjwidth+) + height= + (imgObjheight+));

　　else

　　// 因為通過 Image 對象動態裝載圖片不可能立即得到圖片的寬度和高度所以每隔毫秒重復調用檢查

　　setTimeout(checkImg( + theURL + + winName + ) )

　　}

　　}

　　function OpenFullSizeWindow(theURLwinNamefeatures) {

　　var aNewWin sBaseCmd;

　　// 彈出窗口外觀參數

　　sBaseCmd = toolbar=nolocation=nostatus=nomenubar=noscrollbars=noresizable=no;

　　// 調用是否來自 checkImg

　　if (features == null || features == ){

　　// 創建圖像對象

　　imgObj = new Image();

　　// 設置圖像源

　　imgObjsrc = theURL;

　　// 開始獲取圖像大小

　　checkImg(theURL winName)

　　}

　　else{

　　// 打開窗口

　　aNewWin = windowopen(theURLwinName sBaseCmd + features);

　　// 聚焦窗口

　　aNewWinfocus();

　　}

　　}

　　//>

　　</script>

　　使用時將上面的代碼放在網頁文檔的<head></head>標記對中然後在鏈接的點擊事件中調用 OpenFullSizeWindow函數如<a onClick=OpenFullSizeWindow(thishref);return false><img src=smalljpg></a>即可

　　以上代碼在IE x－中測試通過

　　九 比較靈活的HTA窗口

　　我簡單介紹一下HTA的全名為HTML Application翻譯過來就是HTML應用程序你只要簡單的用hta為擴展名保存HTML頁面就算創建了一個HTA文件下面我們就用HTA 來編個窗口將以下這段代碼保存為hta文件然後再用浏覽器打開會發現什麼？買個關子自己去瞧瞧

　　<HTML>

　　<HEAD>

　　<TITLE></TITLE>

　　<HTA:APPLICATION ID=oHTA

　　APPLICATIONNAME=myApp

　　BORDER=thin

　　BORDERSTYLE=normal

　　CAPTION=yes

　　ICON=filenameico

　　MAXIMIZEBUTTON=yes

　　MINIMIZEBUTTON=yes

　　SHOWINTASKBAR=no

　　INGLEINSTANCE=no

　　SYSMENU=yes

　　VERSION=

　　WINDOWSTATE=normal />

　　</HEAD>

　　<BODY>

　　<b></b>

　　</BODY>

　　</HTML>

　　有人會發現上面這些代碼與平時的html有點不同多了HTA:APPLICATION標簽這就是關鍵之處hta通過它來提供一系列面向應用程序的功能接下來再講一講它的屬性（我的頭又在發脹）

　　APPLICATIONNAME屬性(applicationName)

　　此屬性為設置HTA的名稱

　　BORDER屬性(border)

　　此屬性為設置為HTA的窗口邊框類型默認值為 thick

　　它可以設為　thick 指定窗口為粗邊框

　　dialog window 指定窗口為對話框

　　none 指定窗口無邊框

　　thin 指定窗口為窄邊框

　　BORDERSTYLE屬性(borderStyle)

　　此屬性為設置HTA窗口的邊框格式默認值為 normal

　　它可以設為

　　normal 普通邊框格式

　　complex 凹凸格式組合邊框

　　raised 凸出的D邊框

　　static D邊框格式

　　sunken 凹進的D邊框

　　CAPTION屬性(caption)

　　此屬性為設置HTA窗口是否顯示標題欄或標題默認值為 yes

　　ICON屬性(icon)

　　此屬性為設置應用程序的圖標

　　MAXIMIZEBUTTON屬性(maximizeButton)

　　此屬性為設置是否在HTA窗口中顯示最大化按鈕默認值為 yes

　　MINIMIZEBUTTON屬性(minimizeButton)

　　此屬性為設置是否在HTA窗口中顯示最小化按鈕默認值為 yes

　　SHOWINTASKBAR屬性(showInTaskBar)

　　此屬性為設置是否在任務欄中顯示此應用程序默認值為 yes

　　SINGLEINSTANCE屬性(singleInstance)

　　此屬性為設置是否此應用程序同時只能運行一次次屬性以APPLICATIONNAME屬性作為標識默認值為 no

　　SYSMENU屬性(sysMenu)

　　此屬性為設置是否在HTA窗口中顯示系統菜單默認值為 yes

　　VERSION屬性(version)

　　此屬性為設置應用程序的版本默認值為空

　　WINDOWSTATE屬性(windowState)

　　此屬性為設置HTA窗口的初始大小默認值為 normal

　　它可以設為 normal 默認大小

　　minmize 最小化

　　maximize 最大化

　　以上括號中的是在腳本引用的屬性在腳本中以上屬性皆為只讀屬性此外在腳本中還可以使用commandLine屬性來檢索應用程序啟動時的參數

　　在HTA中還可以繼續使用html中的絕大多數標簽腳本等


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19594.html
    《javascript彈出窗口詳解》本文是由JSP教程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.