夏日博客

A-A+

js中弹出窗口关闭获得选择返回值

2016年10月14日 前端设计 暂无评论 阅读 5 views 次

本文章来介绍利用showModalDialog命令实现弹出模态窗页面，获得选择返回值，并关闭效果，同时也介绍很多种弹出窗口返回值的程序,有需要学习的朋友可参考。

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

1、主页面,代码如下:

  1. <script type="text/javascript" language="javascript">   
  2.     function DialogCustomerSelection() {   
  3.         var dlgResult = window.showModalDialog("CustomerSelection.aspx", window, "dialogWidth:480px; dialogHeight:240px; status:0");   
  4.         if (dlgResult != null) {   
  5.             //alert(dlgResult);   
  6.             var txtCode = document.getElementById("<%=TxtCustomerCode.ClientID%>");   
  7.             txtCode.value = dlgResult;   
  8.         }   
  9.     }   
  10. </script>  
  11. //… …  
  12. <label>客户编码：<asp:TextBox runat="server" ID="TxtCustomerCode" ToolTip="客户编码" /></label>   
  13. <a href="javascript:DialogCustomerSelection();">选择客户</a>  

2、弹出页面,代码如下:

  1. <base target="_self" />  
  2. <script type="text/javascript" language="javascript">   
  3.     function ReturnDialogResult(result) {   
  4.         window.returnValue = result;   
  5.         window.opener = null;   
  6.         window.close();   
  7.     }   
  8. </script>  
  9. <tr>   
  10.     <td>编码<%=i*3%></td>   
  11.     <td>客户名称<%=i*4%></td>   
  12.     <td><%=i*123412%></td>   
  13.     <td><%=i*123423%></td>   
  14.     <td>联系人<%=i*7%></td>   
  15.     <td>域名<%=i*13%></td>   
  16.     <td><a href="javascript:ReturnDialogResult('<%=i*3%>');">选择</a></td>   
  17. </tr>  

另一种方法，直接使用window.open,代码如下:

  1. <script language="javascript">  
  2. <!--  
  3. //打开模式窗口  
  4. function open1(){  
  5.   //设置模式窗口的一些状态值  
  6.   var windowStatus = "dialogWidth:260px;dialogHeight:180px;center:1;status:0;";  
  7.   //在模式窗口中打开的页面  
  8.   var url = "test.html";  
  9.   //将模式窗口返回的值临时保存  
  10.   var temp = showModalDialog(url,"",windowStatus);  
  11.   //将刚才保存的值赋给文本输入框returnValue  
  12.   document.all.returnValue.value = temp;  
  13. }  
  14. //打开无菜单窗口  
  15. function open2(){  
  16.   //设置窗口的一些状态值  
  17.   var windowStatus = "left=380,top=200,width=260,height=200,resizable=0,scrollbars=0,menubar=no,status=0";  
  18.   //在窗口中打开的页面  
  19.   var url = "test1.html";  
  20.       window.open(url,"noMenuWindowName",windowStatus);    
  21. }  
  22. //打开全屏窗口  
  23. function open3(){  
  24.   //设置窗口的一些状态值  
  25.   var windowStatus = "fullscreen = 1";  
  26.   //在窗口中打开的页面  
  27.   var url = "test2.html";  
  28.       window.open(url,"noMenuWindowName",windowStatus);    
  29. }  
  30. -->  
  31. </script>  
  32. <body>  
  33. <input type="button" name="btn1" value="打开模式窗口" onClick="open1()">  
  34. <br>  

从模式窗口返回的值：

  1. <input type="text" id="returnValue" name="returnValue">  

补充：window.opener 的用法

window.opener 的用法在一般的用法中，只是用来解决关闭窗口时不提示弹出窗口， 而对它更深层的了解一般比较少。其 实 window.opener是指调用window.open方法的窗口。

在工作中主要是用来解决部分提交的。这种跨页操作对工作是非常有帮助的。

如果你在主窗口打开了一个页面，并且希望主窗口刷新就用这个，打开页面的window.opener就相当于主窗口的window。

主窗口的刷新你可以用

window.opener.location.reload()；

如果你用虚拟的目录：如struts的*.do会提示你重试,你可以改成这样 window.opener.yourformname.submit() 就好了.

在应用中有这样一个情况，在A窗口中打开B窗口，在B窗口中操作完以后关闭B窗口，同时自动刷新A窗口,代码如下:

  1. function closeWin(){hasClosed = true;  
  2. window.opener.location="javascript:reloadPage();";  
  3. window.close();}  
  4. function window.onbeforeunload(){if(!hasClosed){window.opener.location="javascript:reloadPage();";}}  
  5. </script>  

　

上面的代码在关闭B窗口的时候会提示错误，说缺少Object,正确的代码如下：

  1. function closeWin(){hasClosed = true;  
  2. window.opener.location="javascript:reloadPage();";  
  3. window.opener=null;window.close();}  
  4. function window.onbeforeunload(){if(!hasClosed){//如果已经执行了closeWin方法，则不执行本方法window.opener.location="javascript:reloadPage();";}}  
  5. </script>  

reloadPage方法如下:

  1. function reloadPage() {  
  2. history.go(0);  
  3. document.execCommand("refresh")  
  4. document.location = document.location;document.location.reload();  
  5. }　  

　
PS:由于需要支持正常关闭和强制关闭窗口时能捕捉到事件，用了全局变量hasClosed.

补充，在父窗口是frame的时候在刷新父窗口的时候会出现问题:

The page cannot be refreshed without resending the information.

后修改如下:

window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;

不需要执行自带的reload()方法,注意，不要再画蛇添足加上这一句:

window.opener.parent.document.frames.item('mainFrame').location.reload();

标签：

给我留言