开发者社区> 老朱教授> 正文

刷新modalDialog的父窗口

简介:
+关注继续查看

1、新建页面parent.htm作为父窗口
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3     <head>
 4         <title></title>
 5         <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
 6         <meta name="ProgId" content="VisualStudio.HTML">
 7         <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
 8         <script language="javascript">
 9             <!--
10             /**
11             * 用途:打开模态窗口,并且当返回值为true时,刷新窗口
12             * 
13             * @param newUrl        模态窗口页面路径
14             * @param wLen        模态窗口宽度
15             * @param iLen        模态窗口高度
16             **/
17             function OpenModalDialog(newURL,wLen,hLen)
18             {
19                 try
20                 {
21                     //初始化变量,用于接收页面反回值。
22                     var recdata=false;
23                     //模式窗口打开指定的窗口链接
24                     recdata=showModalDialog(newURL,"DescWindow",
25                         "dialogWidth:"+wLen+"px;dialogHeight:"+hLen+"px;center:1;scroll:1;help:0;status:0");
26 
27                     //判断对应的返回值
28                     if(recdata==true)
29                     {
30                         // 刷新当前窗口
31                         window.location.reload();
32                         window.alert("刷新窗口~~");
33                     }
34                 }
35                 catch(err)
36                 {}
37             }
38             -->
39     </script>
40     </head>
41     <body>
42         <href="javascript: OpenModalDialog('sub.aspx', 700, 500)">打开模态窗口</a>
43     </body>
44 </html>
45 

2、建立页面sub.aspx:
 1 <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="TestSyntax.WebForm1" %>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3 <HTML>
 4     <HEAD>
 5         <title>sub</title>
 6         <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
 7         <meta content="C#" name="CODE_LANGUAGE">
 8         <meta content="JavaScript" name="vs_defaultClientScript">
 9         <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10         <base target="_self">
11     </HEAD>
12     <body>
13         <form id="Form1" method="post" runat="server">
14             <asp:Button id="btnOk" runat="server" Text="确 定"></asp:Button>&nbsp; 
15             <INPUT type="button" value="取 消" onclick="javascript: window.close();">
16         </form>
17     </body>
18 </HTML>
19 

3、sub.aspx.cs代码如下
 1 using System;
 2 using System.Collections;
 3 using System.ComponentModel;
 4 using System.Data;
 5 using System.Drawing;
 6 using System.Web;
 7 using System.Web.SessionState;
 8 using System.Web.UI;
 9 using System.Web.UI.WebControls;
10 using System.Web.UI.HtmlControls;
11 
12 namespace TestSyntax
13 {
14     /// <summary>
15     /// WebForm1 的摘要说明。
16     /// </summary>
17     public class WebForm1 : System.Web.UI.Page
18     {
19         protected System.Web.UI.WebControls.Button btnOk;
20     
21         private void Page_Load(object sender, System.EventArgs e)
22         {
23             // 在此处放置用户代码以初始化页面
24         }
25 
26         #region Web 窗体设计器生成的代码
27         override protected void OnInit(EventArgs e)
28         {
29             //
30             // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
31             //
32             InitializeComponent();
33             base.OnInit(e);
34         }
35         
36         /// <summary>
37         /// 设计器支持所需的方法 - 不要使用代码编辑器修改
38         /// 此方法的内容。
39         /// </summary>
40         private void InitializeComponent()
41         {    
42             this.btnOk.Click += new System.EventHandler(this.btnOk_Click);
43             this.Load += new System.EventHandler(this.Page_Load);
44 
45         }
46         #endregion
47 
48         /// <summary>
49         /// 操作成功,设定模态窗口的返回值为true,用来刷新父窗口
50         /// </summary>
51         /// <param name="sender"></param>
52         /// <param name="e"></param>
53         private void btnOk_Click(object sender, System.EventArgs e)
54         {
55             string strScript = @"<script>window.returnValue=true;window.close();</script>";
56 
57             this.Response.Write(strScript);
58         }
59     }
60 }
61 

这样,实现了操作成功后刷新父窗口,又避免了取消操作的无用刷新。 


Web开发中适当运用一些弹出子窗口有很多好处,可以节省页面设计代价,获得好的用户体验,在最近项目开发中我遇到了几个父子窗口的问题,现在整理给大家,希望有所帮助.
               
   情景一: 打开某一子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.        
       
                 1: 页面A:父窗口,其中有一个打开子窗口的链接,<a  href="#"onclick="open()">页面C</a>
                      A中有如下js代码:
None.gif<script language="JavaScript">
None.gif   
function open()
None.gif   {
None.gif     window
.showModalDialog("页面B");
None.gif   }
None.gif
</script>

                2: 页面B,此为中间页,起过渡作用
                     B html 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>**</title>
</head>

<frameset rows="0,*">
    
<frame src="about:blank">
    
<frame src="页面C">
  
</frameset><noframes></noframes>
</html>

                 3:页面C ,要打开的子窗口. 
                    它关闭时候刷新父窗口很简单,只要把A中
                    <a  href="#"onclick="open()">页面C</a>  改为
                    <a  href="页面A"onclick="open()">页面C</a>

    情景二:打开某一需要用到activex控件子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.  
                  此时候就不能用 window.showModalDialog()事件打开模式对话框了因为activex控件会报错,必须用window.open()
 
                  1: 页面A:父窗口,其中有一个打开子窗口的链接,<a  href="#"onclick="open()">页面B</a>
                      A中有如下js代码.

<script language="JavaScript">
function open()
 {
   window
.open("页面B",'upload', 'height=400, width=420, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no');
 }
</script>

                  2: 页面B,要打开的子窗口,关闭时候触发window.opener.location.reload();window.close();即可刷新父窗口并且关闭子窗口.

   
     情景三:打开某一子窗口,   让用户选择要添加的东东,譬如要添加到文章里的相片选择后关闭子窗口,然后选择的东东出现在父窗口里.
                    在下图中,我点击"添加照片"链接然后弹出子窗口,在子窗口中选择后点击"添加照片"按钮,子窗口自动关闭,并且父窗口"已添加照片:"下面列出了我选择的照片。

        addpic1.jpg
      
            add2.jpg

               实现方法:类似情景一需要中间页面B , 只是子窗口C中点击"添加按钮"时触发的js事件中,除了获得选中的checkbox的值外,还要把获得的值回传给父窗口,传值回去的代码如下.
              

None.gifwindow.parent.returnValue="选中的checkbox";
None.gif               window
.parent.close();

 
              而父窗口要捕获此值就要在情景一中所说的open()事件中添加获得返回值 

<script language="JavaScript">
  
function open()
   {
         
var str=window.showModalDialog("页面C");
         
if(str!=null)  
       {              
          picobj
.innerHTML+=str; 
          
       }
    }
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
8229 0
MongoDB splitChunk引发路由表刷新导致响应慢
MongoDB splitChunk引发路由表刷新导致响应慢
842 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
16618 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
18767 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13674 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
20643 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23713 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
12459 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13939 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载