彈出網頁窗口

原創 梦醒-无痕 2020-06-01 10:18

通過window.open彈出窗口

<span style="font-size:14px;">			var url = "BudgetZXScoreAction.do?method=searchRanking&&todo_id=<%=todo_id%>";        //轉向網頁的地址;
  			var name = "查看排名";                    //網頁名稱，可爲空;
  			var iWidth = 700;                         //彈出窗口的寬度;
  			var iHeight = 500;                        //彈出窗口的高度;
  			//獲得窗口的垂直位置;
			var iTop = (window.screen.availHeight-30-iHeight)/2;
			//獲得窗口的水平位置;           
			var iLeft = (window.screen.availWidth-10-iWidth)/2; 
                        window.open(url,name,'height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+'</span><span style="font-size:10px;">,<span style="font-family: Arial, Helvetica, sans-serif;">toolbar=no,menubar=no, scrollbars=auto,resizeable=no,location=no,status=no');</span></span>
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 | 窗口大小是否可調整 
screenX | pixel value | 窗口距屏幕左邊界的像素長度 
screenY | pixel value | 窗口距屏幕上邊界的像素長度 
scrollbars | yes/no | 窗口是否可有滾動欄 
titlebar | yes/no | 窗口題目欄是否可見 
toolbar | yes/no | 窗口工具欄是否可見 
Width | pixel value | 窗口的像素寬度 
z-look | yes/no | 窗口被激活後是否浮在其它窗口之上

得到屏幕的寬度：
alert(screen.width);
alert(window.screen.availWidth);

得到屏幕的高度：

alert(screen.height);
alert(window.screen.availHeight);


通過window.showModalDialog方式彈出窗口

基本介紹：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。

使用方法：
vReturnValue = window.showModalDialog(sURL , vArguments ,sFeatures)
vReturnValue = window.showModelessDialog(sURL, vArguments,sFeatures)

參數說明：
sURL--
必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments--
可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures--
可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。
1.dialogHeight :對話框高度，不小於１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認的單位是em，而ＩＥ５中是px，爲方便其見，在定義modal方式的對話框時，用px做單位。
2.dialogWidth: 對話框寬度。
3.dialogLeft: 離屏幕左的距離。
4.dialogTop: 離屏幕上的距離。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默認yes，但仍可以指定高度和寬度。
6.help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認yes。
7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。默認no。
8.status: {yes | no | 1 | 0 } ［IE5+］：是否顯示狀態欄。默認爲yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明對話框是否顯示滾動條。默認爲yes。
下面幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印預覽時對話框是否隱藏。默認爲no。
11.edge:{ sunken | raised }：指明對話框的邊框樣式。默認爲raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默認爲no。


參數傳遞：
1.要想對話框傳遞參數，是通過vArguments來進行傳遞的。類型不限制，對於字符串類型，最大爲4096個字符。也可以傳遞對象，例如：
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您傳遞的參數爲：" + obj.name)
</script>
-------------------------------
2.可以通過window.returnValue向打開對話框的窗口返回信息，當然也可以是對象。例如：
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.51js.com";
</script>

幣種定義部分 

var psAddStr="ProcessID="+ProcessID+"&AddFlag="+isAddFlag+"&BZBH="+vsBZBH+"&BZMC="+vsBZMC+"&BZFH="+vsBZFH+"&JD="+vsJD;
 
 var Result=window.showModalDialog("addSave.asp?"+psAddStr,'',"dialogHeight:250px;dialogWidth:250px;status:no;");


將參數傳遞與返回結果結合在一起的實例

ParentPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        function openwindow() {
            var obj = new Object();
            obj.value = "3";
            obj.name = "4";
            obj.sew = "5";
            str =window.showModalDialog("ChildPage.aspx",obj,"dialogWidth=200px;dialogHeight=100px");
            alert(str);

        }

        function openModelessDialog() {
            var obj = new Object();
            obj.value = "3";
            obj.name = "4";
            obj.sew = "5";
            str = window.showModelessDialog("ChildPage.aspx", obj, "dialogWidth=200px;dialogHeight=100px");
            alert(str);

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="btnOpen" value="打開模態窗口" οnclick="openwindow();" />
    <input type="button" id="Button1" value="打開非模態窗口" οnclick="openModelessDialog();" />
    </div>
    </form>
</body>
</html>

ChildPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function getArguments() {
            var obj = window.dialogArguments
            alert("您傳遞的參數爲：" + obj.value)
        }

        function windowclose() {
            window.returnValue = "childPage.Close";
        }
    </script>
</head>
<body οnunlοad="windowclose();">
    <form id="form1" runat="server">
    <div>
    <input type="button" id="btnOpen" value="打開窗口" οnclick="getArguments();" />
    <input type="button" id="btnClose" value="關閉窗口" οnclick='self.close(); ' />

    </div>
    </form>
</body>
</html>


在子窗口中就可以通過window.dialogArguments獲取父窗口對象，
通過window.dialogArguments.document.getElementById("parentMenuName")來獲取父窗口中的id爲parentMenuName的dom對象通過window.dialogArguments.document.getElementById("mnId");來獲取父窗口中的id爲mnId的dom對象

再通過下面的語句，就可以在子窗口的js代碼中爲父窗口中的dom元素賦值

val.value="部門";

val2.vlue="0102999"

最後通過window.close();關掉子窗口

模態（modal）和非模態（modeless）的區別

所謂模態對話框，就是指除非採取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話 框。非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。

本文介紹如何使用JavaScript語言來創建這兩種類型的對話 框、控制其大小和位置、改變其外觀以及在對話框間的數據傳遞。本文的所有例程中，從層次上涉及到2個HTML頁面。我們把第一個頁面叫做caller頁面，第二個頁面叫做callee頁面。也就是說，在caller頁面執行代碼創建生成callee頁面。


創建模態和非模態對話框 


首先，我們舉個例子來快速瞭解一下什麼是模態與非模態。在caller.htm中，我們輸入以下代碼：

Html代碼  收藏代碼
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <script language="javascript">   
  5. function fnOpenModal(){   
  6. window.showModalDialog("callee.htm")   
  7. }   
  8. function fnOpenModeless(){   
  9. window.showModelessDialog("callee.htm")   
  10. }   
  11. </script>   
  12.  </HEAD>  
  13.   
  14.  <BODY>  
  15.   <INPUT TYPE="button" VALUE="創建模態對話框" onclick="fnOpenModal()">   
  16. <br><br>   
  17. <INPUT TYPE="button" VALUE="創建非模態對話框" onclick="fnOpenModeless()">   
  18.   
  19.  </BODY>  
  20. </HTML>  

 
在 瀏覽器中打開caller.htm，點擊“創建模態對話框”按鈕，將會出現一個對話框窗口，其中的內容是callee.htm。你會看到，除了關閉這個新 窗口，無論怎樣我們也不能將其他的窗口設置爲“當前活動”窗口，這個一直是活動狀態的窗口類型就是模態類型。關閉這個模態對話框，回到 caller.htm頁面，點擊“創建非模態對話框”，出現一個包含callee.htm頁面的對話框窗口。這回有所不同，鼠標可以轉移到其他地方使另外 的窗口成爲“當前活動”狀態，這就是非模態的概念。 


控制對話框大小和位置

控制對話框的大小和位置涉及到5個方面：高度（dialogHeight）、寬度（dialogWidth）、相對於桌面左上角的x座標 （dialogLeft）、y座標（dialogTop）以及是否讓對話框窗口居中（center）。由於不同版本的Internet Explorer瀏覽器處理的默認度量單位並非一致，所以我們在指定高度、寬度等大小時，最好是同時設置好單位。單位種類包括很多，比如cm、mm、 in、pt、pc、px。請注意：最小的高度值是100px。 

下面的代碼將打開一個高200px、寬800px的對話框： 
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px'); 
我們注意到，打開的新窗口會在桌面中處於居中的位置，這也正是居中屬性（center）的默認值。居中屬性（center）的可取值包括yes、no、1、0、on和off，含義一目瞭然。執行以下代碼，看看關閉居中屬性後新窗口的位置： 
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no'); 
我們看到，新窗口緊挨者桌面的左上角打開。當然，我們可以使用dialogLeft和dialogTop 屬性來精確定義新窗口的打開位置。下面的代碼將在相對於桌面左上角的x位置300px和y位置500px處打開新窗口： 
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;dialogTop:500') 
注意，即使指定了居中屬性，但如果同時設置了dialogLeft和dialogTop屬性值，那麼窗口位置將遵從後者。試一試執行下面的代碼： 
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;dialogTop:500;center:yes')


改變對話框外觀

對話框的外觀控制包括從窗口邊緣風格（edge）、是否存在滾動條（scroll）、是否包含上下文關聯提示圖標（help）、是否顯示狀態欄 （status）以及是否可以改變窗口大小（resizable）等方面。默認情況下，新打開的窗口是大小不可改變的、邊緣風格爲凸起、在新窗口右上角顯 示一個上下文關聯提示圖標、存在滾動條，比如： edge的可取值爲sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含義一目瞭然。 
下面的代碼將去除上下文關聯提示圖標、不顯示狀態欄、窗口邊緣風格爲凹陷： 
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken"); 


實例

上面我們介紹了創建模態和非模態窗口的語法以及如何控制新窗口的大小、位置和外觀，接下來我們研究一下實際應用中更實用的功能：如何從caller頁面傳遞數據到callee頁面。 從caller頁面傳遞給callee頁面的數據分爲3類：傳遞值、傳遞數組引用以及傳遞對象,它們都是通showModalDialog()和showModelessDialog()的第2個參數實現的。 
（一）傳遞值類型數據 
在caller.htm頁面中輸入以下代碼：

Html代碼  收藏代碼
  1. <INPUT TYPE="button" VALUE="創建模態對話框" onclick="fnOpenModal()">   
  2. <br><br>   
  3. <INPUT TYPE="button" VALUE="創建非模態對話框" onclick="fnOpenModeless()">   
  4. <script language="javascript">   
  5. <!--   
  6. function fnOpenModal(){   
  7. window.showModalDialog("callee.htm","打開了一個新模態窗口")   
  8. }   
  9. function fnOpenModeless(){   
  10. window.showModelessDialog("callee.htm","打開了一個新非模態窗口")   
  11. }   
  12. // -->   
  13. </script>   
  14. 在callee.htm頁面中輸入以下代碼：   
  15. <SCRIPT LANGUAGE="JavaScript">   
  16. <!--   
  17. alert(dialogArguments);   
  18. // -->   
  19. </SCRIPT>   

 在瀏覽器中打開caller.htm，點擊任意一個按鈕，我們將首先看到如下的提示信息框： 
 
  
 
然後纔出現新窗口。這種情況下，callee.htm頁面中的window對象的屬性dialogArguments將對應於caller.htm頁面中的"打開了一個新模態窗口"或者"打開了一個新非模態窗口"。如果直接打開callee.htm，將會出現錯誤提示。 
（二）傳遞數組引用類型數據 
第一種值類型數據的傳遞中，在callee.htm頁面中只能讀取caller.htm頁面的傳遞數據。當需要對caller.htm頁面的傳遞內容進行修改時，就需使用到數組引用類型的傳遞方式。 
首先，在caller.htm頁面中輸入以下代碼：

Java代碼  收藏代碼
  1. <INPUT TYPE="button" VALUE="創建模態對話框" οnclick="fnOpenModal()">   
  2. <br><br>   
  3. <INPUT TYPE="button" VALUE="創建非模態對話框" οnclick="fnOpenModeless()">   
  4. <script language="javascript">   
  5. <!--   
  6. var a = new Array;   
  7. a[0]="first";   
  8. a[1]="second";   
  9. a[2]="third";   
  10. function fnOpenModal(){   
  11. window.showModalDialog("callee.htm",a)   
  12. }   
  13. function fnOpenModeless(){   
  14. window.showModelessDialog("callee.htm",a)   
  15. }   
  16. // -->   
  17. </script>   
  18. 然後在callee.htm頁面中輸入以下代碼：   
  19. <SCRIPT LANGUAGE="JavaScript">   
  20. <!--   
  21. a = dialogArguments;   
  22. alert(a);   
  23. a[0] = "fourth";   
  24. // -->   
  25. </SCRIPT>   

 
最後，在瀏覽器中打開caller.htm，點擊任意一個按鈕，我們將首先看到如下的對話框： 
 
 
接着關閉這個對話框以及新打開的窗口，再次點擊一個按鈕，又出現一個對話框： 
 
 
從運行結果我們看到，在caller.htm頁面中通過對數組a的地址引用，就可以實現在callee.htm中修改數組a的內容。 
注意在callee.htm中要首先建立對傳遞數據的附值：a = dialogArguments。 
（三）傳遞對象類型數據 
在caller.htm 和callee.htm中傳遞數據的最有效方式是通過對象方式進行，這不僅能實現從caller.htm到callee.htm的傳遞，還能從 callee.htm傳遞到caller.htm。而且，我們還可以在caller.htm中定義對象的方法，再在callee.htm中使用它們。實際 上，我們可以將caller.htm的window對象傳遞給callee.htm，這樣就可以在callee.htm中訪問caller.htm的變量 及函數。 
來看看一個實際的例子。在caller.htm中輸入以下代碼：

Html代碼  收藏代碼
  1. <HTML>   
  2. <HEAD>   
  3. <TITLE>傳遞對象數據</TITLE>   
  4. <SCRIPT>   
  5. var sColor="";    
  6. function callDialog() {   
  7. showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");   
  8. }   
  9. function update()   
  10. {   
  11. oColor.innerText = sColor;   
  12. }   
  13. </SCRIPT>   
  14. </HEAD>   
  15. <BODY>   
  16. <P>輸入你最喜歡的顏色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>    
  17. <INPUT TYPE="button" VALUE="Display Modeless Dialog" onclick="callDialog()">   
  18. </BODY>   
  19. </HTML>   
  20. 在callee.htm中輸入以下代碼：   
  21. <HTML>   
  22. <HEAD>   
  23. <TITLE>callee.html</TITLE>   
  24. <SCRIPT>   
  25. function getInfoAndUpdate() {   
  26. var callerWindowObj = dialogArguments;   
  27. callerWindowObj.sColor = oEnterColor.value;   
  28. callerWindowObj.update();   
  29. }   
  30. function cancel() {   
  31. var callerWindowObj = dialogArguments;   
  32. callerWindowObj.sColor = "Yellow";   
  33. callerWindowObj.update();    
  34. }   
  35. </SCRIPT>   
  36. </HEAD>   
  37. <BODY>   
  38. 輸入你最喜歡的顏色:<INPUT ID=oEnterColor><BR><BR>   
  39. <INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();">   
  40. <INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();">   
  41. <INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();">   
  42. </BODY>   
  43. </HTML>    

 
在瀏覽器中打開caller.htm，點擊“顯示非模態對話框”按鈕，出現新對話框： 
 
 
在對話框中輸入其他顏色名稱，點擊“Apply”按鈕後，執行callee.htm中的getInfoAndUpdate函數：

Js代碼  收藏代碼
  1. function getInfoAndUpdate() {   
  2. var callerWindowObj = dialogArguments;   
  3. callerWindowObj.sColor = oEnterColor.value;   
  4. callerWindowObj.update();   
  5. }   

 
因 爲在caller.htm中傳遞給callee.htm的是對象類型數據window，所以經過第一條語句的附值，callerWindowObj就指向 了caller.htm頁面，然後就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的變量及 函數：callerWindowObj.sColor = oEnterColor.value負責將callee.htm中輸入的顏色名稱傳遞給caller.htm中的變量sColor，然後再執行 caller.htm中的 update()函數更新顯示信息。 
可以看到，通過對象方式傳遞數據，功能很豐富強大，而且使用起來也不復雜



發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章