JavaScript彈出窗口方法匯總

字號:


    本文實例匯總了常用的JavaScript彈出窗口方法,供大家對比參考,希望能對大家有所幫助。詳細方法如下:
    1.無提示刷新網(wǎng)頁:
    大家有沒有發(fā)現(xiàn),有些網(wǎng)頁,刷新的時候,會彈出一個提示窗口,點“確定”才會刷新。
    而有的頁面不會提示,不彈出提示窗口,直接就刷新了.
    如果頁面沒有form,
    則不會彈出提示窗口
    如果頁面有form表單,
    a)<form method="post" ...>
    會彈出提示窗口
    b)<form method="get" ...>
    不會彈出
    2. javascript刷新頁面的方法:
    view source
    print?1 window.location.reload();
    使用window.open()彈出的彈出窗口,刷新父窗口
    view source
    print?1 window.opener.location.reload()
    使用window.showDialog彈出的模式窗口
    view source
    print?1 window.dialogArguments.location.reload();
    3.javascript彈出窗口代碼:
    window.open()方式:
    window.open()支持環(huán)境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
    基本語法:
    view source
    print?1 window.open(pageURL,name,parameters)
    其中:
    pageURL 為子窗口路徑
    name 為子窗口句柄
    parameters 為窗口參數(shù)(各參數(shù)用逗號分隔)
    示例:
    view source
    print?1 <SCRIPT>
    2 <!--
    3 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')
    4 //寫成一行
    5 -->
    6 </SCRIPT>
    腳本運行后,page.html將在新窗體newwindow中打開,寬為100,高為400,距屏頂0象素,屏左0象素,無工具條,無菜單條,無滾動條,不可調(diào)整大小,無地址欄,無狀態(tài)欄。
    請對照。
    上例中涉及的為常用的幾個參數(shù),除此以外還有很多其他參數(shù),請見四。
    各項參數(shù)
    其中yes/no也可使用1/0;pixel value為具體的數(shù)值,單位象素。
    參數(shù) | 取值范圍 | 說明
    | |
    alwaysLowered | 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 | 窗口大小是否可調(diào)整
    screenX | pixel value | 窗口距屏幕左邊界的像素長度
    screenY | pixel value | 窗口距屏幕上邊界的像素長度
    scrollbars | yes/no | 窗口是否可有滾動欄
    titlebar | yes/no | 窗口題目欄是否可見
    toolbar | yes/no | 窗口工具欄是否可見
    Width | pixel value | 窗口的像素寬度
    z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
    view source
    print?1 function ShowDialog(url) {
    2 var iWidth=300; //窗口寬度
    3 var iHeight=200;//窗口高度
    4 var iTop=(window.screen.height-iHeight)/2;
    5 var iLeft=(window.screen.width-iWidth)/2;
    6 window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
    7 Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
    8 }
    window.showModalDialog方式:
    基本介紹:
    showModalDialog() (IE 4+ 支持)
    showModelessDialog() (IE 5+ 支持)
    window.showModalDialog()方法用來創(chuàng)建一個顯示HTML內(nèi)容的模態(tài)對話框。
    window.showModelessDialog()方法用來創(chuàng)建一個顯示HTML內(nèi)容的非模態(tài)對話框。
    使用方法:
    view source
    print?1 vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
    2 vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
    參數(shù)說明:
    sURL--
    必選參數(shù),類型:字符串。用來指定對話框要顯示的文檔的URL。
    vArguments--
    可選參數(shù),類型:變體。用來向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限,包括數(shù)組等。對話框通過window.dialogArguments來取得傳遞進來的參數(shù)。
    sFeatures--
    可選參數(shù),類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
    1.dialogHeight :對話框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。
    2.dialogWidth: 對話框?qū)挾取?BR>    3.dialogLeft: 離屏幕左的距離。
    4.dialogTop: 離屏幕上的距離。
    5.center: {yes | no | 1 | 0 }:窗口是否居中,默認yes,但仍可以指定高度和寬度。
    6.help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,默認yes。
    7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改變大小。默認no。
    8.status: {yes | no | 1 | 0 } [IE5+]:是否顯示狀態(tài)欄。默認為yes[ Modeless]或no[Modal]。
    9.scroll:{ yes | no | 1 | 0 | on | off }:指明對話框是否顯示滾動條。默認為yes。
    下面幾個屬性是用在HTA中的,在一般的網(wǎng)頁中一般不使用。
    10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印預覽時對話框是否隱藏。默認為no。
    11.edge:{ sunken | raised }:指明對話框的邊框樣式。默認為raised。
    12.unadorned:{ yes | no | 1 | 0 | on | off }:默認為no。
    參數(shù)傳遞:
    (1).要想對話框傳遞參數(shù),是通過vArguments來進行傳遞的。類型不限制,對于字符串類型,最大為4096個字符。也可以傳遞對象,例如:
    -------------------------------
    parent.htm頁面:
    view source
    print?1 <script>
    2 var obj = new Object();
    3 obj.name="jb51";
    4 window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
    5 </script>
    modal.htm頁面:
    view source
    print?1 <script>
    2 var obj = window.dialogArguments
    3 alert("您傳遞的參數(shù)為:" + obj.name)
    4 </script>
    (2)可以通過window.returnValue向打開對話框的窗口返回信息,當然也可以是對象。例如:
    parent.htm頁面代碼:
    view source
    print?1 <script>
    2 str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
    3 alert(str);
    4 </script>
    5 modal.htm
    6 <script>
    8 </script>
    例子:
    view source
    print?1 function ShowDialog(url) {
    2 var iWidth=300; //窗口寬度
    3 var iHeight=200;//窗口高度
    4 var iTop=(window.screen.height-iHeight)/2;
    5 var iLeft=(window.screen.width-iWidth)/2;
    6 window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
    7 dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
    8 }
    注意這里的第二個參數(shù),window
    4.模式窗口數(shù)據(jù)不刷新(緩存)問題
    在jsp頁面加入如下語句
    view source
    print?1 <%
    2 response.setHeader("Pragma","No-Cache");
    3 response.setHeader("Cache-Control","No-Cache");
    4 response.setDateHeader("Expires", 0);
    5 %>
    5.模式窗口中,鏈接彈出新窗口問題:
    ◎_blank,在新瀏覽器窗口中打開鏈接文件。
    ◎_parent,將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的,則在瀏覽器全屏窗口中載入鏈接的文件,就象_self參數(shù)一樣。
    ◎_self,在同一框架或窗口中打開所鏈接的文檔。此參數(shù)為默認值,通常不用指定。
    ◎_top,在當前的整個瀏覽器窗口中打開所鏈接的文檔,因而會刪除所有框架。
    在</head>和<body>間加入<a href=“a.html”target="_blank "/>
    6.無提示關閉頁面的方法:
    view source
    print?01 function CloseWin(){
    02 var ua = navigator.userAgent; var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
    03 if(ie){
    04 var IEversion = parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));
    05 if( IEversion< 5.5){
    06 var str = '';
    07 document.body.insertAdjacentHTML("beforeEnd", str);
    08 document.all.noTipClose.Click();
    09 } else {
    10 window.opener =null; window.close();
    11 }
    12 }else{
    13 window.close()
    14 }
    15 }
    感興趣的讀者可以調(diào)試一下上述方法,相信會給大家?guī)硪欢ǖ膯l(fā)與幫助。