`
squirrelRao
  • 浏览: 67841 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

总结:子窗口创建及父窗口与子窗口之间通信

    博客分类:
  • Java
阅读更多

1、Javascript弹出子窗口

可以通过多种方式实现,下面介绍几种方法

(1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象
  
  其用法为:
 window.open(URL,windowName,parameters);

URL: 描述要打开的窗口的URL地址,如何为空则不打开任何网页;

windowName:描述被打开的窗口的民称,可以使用'_top'、'_blank'等内建名称,这里的名称跟<a href="..." target="...">里的target属性是一样的。

parameters:描述被打开的窗口的参数值,或者说是样貌,其包括窗口的各个属性值,及要传入的参数值。

例如:

打开一个 400 x 100 的干净的窗口:
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

也可以这样写: var newWindow = open('','_blank');

参数说明如下:
  
top=# 窗口顶部离开屏幕顶部的像素数 
left=# 窗口左端离开屏幕左端的像素数 
width=# 窗口的宽度 
height=# 窗口的高度 
menubar=... 窗口有没有菜单,取值yes或no 
toolbar=... 窗口有没有工具条,取值yes或no 
location=... 窗口有没有地址栏,取值yes或no 
directories=... 窗口有没有连接区,取值yes或no 
scrollbars=... 窗口有没有滚动条,取值yes或no 
status=... 窗口有没有状态栏,取值yes或no 
resizable=... 窗口给不给调整大小,取值yes或no


(2) 在javascript中除了通过open()方法建立window对象实现弹出窗口外,还可以通过建立对话框的方式弹出窗口。
  如: 
    alert(""); //弹出信息提示对话框
    confirm(""); //弹出信息确认对话框
    prompt(""); //具有交互性质的对话框
  
  但是,上述实现的弹出窗口具有的功能较为单一,只能完成较为简单的功能。对于需要在对话框中显示多个数据信息,

甚至是HTML控件就无能为力了。

(3) 使用模态对话框实现复杂的对话框需求
在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容,
也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能。
包括创建模态对话框和非模态对话框两种。
    
实现方法为:

  //创建模态你对话框
  window.showModalDialog(sURL,vArguments,sFeatures)
 
 
  //创建非模态对话框
  window.showModelessDialog(sURL,vArguments,sFeatures)

其区别在于:

  用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框

的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。showModeDialog()则不然。

参数说明:

 sURL:必选参数,类型:字符串。
 
 用来指定对话框要显示的文档的URL。
 
 vArguments:可选参数,类型:变体。
 
 用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
 
 sFeatures:选参数,类型:字符串。

 用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
  
  dialogHeight:对话框高度

  不小于100px,IE4中dialogHeight和dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
   
  dialogWidth: 对话框宽度。
  
  dialogLeft: 距离桌面左的距离。
   
  dialogTop: 离桌面上的距离。
  
  center: 窗口是否居中
  
  默认yes,但仍可以指定高度和宽度,取值范围{yes | no | 1 | 0 }。
   
  help: 是否显示帮助按钮

  默认yes,取值范围 {yes | no | 1 | 0 }。

 resizable: 是否可被改变大小。
  
  默认no,取值范围 {yes | no | 1 | 0 } [IE5+]。

 status: 是否显示状态栏。
  
  默认为yes[ Modeless]或no[Modal],

  取值范围{yes | no | 1 | 0 } [IE5+]。

  scroll:指明对话框是否显示滚动条。

  默认为yes,取值范围{ yes | no | 1 | 0 | on | off }。

  还有几个属性是用在HTA中的,在一般的网页中一般不使用。
  
  dialogHide:在打印或者打印预览时对话框是否隐藏。
  
  默认为no,取值范围{ yes | no | 1 | 0 | on | off }。

  edge:指明对话框的边框样式。
  
  默认为raised,取值范围{ sunken | raised }。
  
  unadorned:默认为no,取值范围{ yes | no | 1 | 0 | on | off }。

 传入参数:

 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象

例如:

var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,

dialogWidth:300px, status:0, edge:sunken');

newWin.open();

与使用window.open()方法创建窗口相比,模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口.

 
2、子窗口与父窗口间通信

(1) 使用window.open()创建的窗口与父窗口通信
可以在子窗口页面中通过window.opener来获取父窗口对象,获取之后子窗口便可以对父窗口执行刷新,传值等操作。
 如:
   window.opener.location.reload(); //子窗口刷新父窗口
   window.opener.location.href //获取父窗口href
   window.opener.locaiton.pathname //获取父窗口路径名

   //刷新父页面
   window.location.href=window.location.href ; //重新定位父页面
   window.location.reload;


(2) 模态窗口与父窗口通信
通过使用showModelDialog(),及showModelessDialog()方法创建的子窗口想与父窗口通信时,不能通过window.opener

来获取父窗口对象。要实现通信,必须在创建模态子窗口时向子窗口传入父窗口对象。

实现方式为:

在父窗口中:

 var newWin=window.showModelDialog(url,window,'');
 newWin.open();

此时参数window即是父窗口对象

在子窗口中:

需首先获取父窗口对象,然后才能使用父窗口对象。由于父窗口对象是在创建
子窗口时通过传入参数的方式传入的,因此,在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下

 var parent=widnow.dialogArguments;
变量parent便是父窗口对象。

例如:

//通过子窗口提交父窗口中的表单:form1,提交后执行查询操作
  var parent=window.dialogArguments;
  parent.document.form1.action="QueryInfor.jsp";
  parent.submit();

//刷新父页面
  var parent=window.dialogArguments;
  parent.location.reload();

//从子窗口传值到父窗口
要实现在模态子窗口中传值到父窗口,需要使用window.returnValue完成

实现方法如下:

在子窗口中:

//获取父窗口某字段值,对该值加一后返回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1;

//传回x值
window.returnValue=x;

在父窗口中:

//获取来自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
  document.getElementById("age").value=newWin;

//在子窗口中设置父窗口的值
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定,因为如果使用了不切实际的方法不仅降低开发效率,也降低了执行效率,往往也会造成不优雅的实现方式和代码风格。

子窗口设置父窗口的值使用方法如下:

子窗口中:

var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1;
//设置父窗口中age属性值
parent.document.getElementById("age").value=x;

以上是我在项目中使用javascript解决子窗口问题时,收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的(这主要与项目本身有关),不过其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时虽然在实现方法上有很大的差别,初次接触会觉得有点乱,但只要理清子窗口与父窗口之间的关系和角色之后,就很好理解了。

分享到:
评论

相关推荐

    创建子窗口与子父窗口间通信

    总结,创建子窗口与子父窗口间的通信是构建复杂Web应用或桌面应用的关键技术。理解并熟练运用各种通信方法,可以帮助开发者构建出更加灵活和互动的用户界面。通过阅读"DHTML手册.chm",你将能够深入了解如何利用...

    Qt6:子窗口向父窗口传值(多控件版)

    在Qt6框架中,开发GUI应用程序时,我们经常会遇到子窗口与父窗口之间通信的需求,尤其是在涉及多个控件交互的场景。子窗口向父窗口传递数据是常见的操作,例如用户在子窗口中填写表单后,点击确认按钮,将表单数据...

    在固定位置创建子窗口,点击父窗口自动隐藏子窗口

    这个场景中的“在固定位置创建子窗口,点击父窗口自动隐藏子窗口”涉及到了窗口管理、事件处理以及窗口之间的通信等多方面的知识点。 1. **窗口管理**:窗口管理是操作系统或应用程序中用于控制窗口显示和操作的...

    C#中父窗口和子窗口之间实现控件互操作

    4. 子窗口向父窗口通信: - 回调方法:在子窗口中定义回调方法,当需要更新父窗口状态时,调用这个方法并传入必要的信息。 - 属性访问:子窗口可以公开一些属性,父窗口可以通过这些属性获取子窗口的状态。 5. 父...

    Qt6:子窗口向父窗口传值

    在Qt6框架中,子窗口向父窗口传递数据是一个常见的需求,这通常涉及到窗口间的通信。Qt6提供了多种方法来实现这种通信,包括信号与槽、共享数据对象、全局变量等。下面我们将深入探讨这些方法,并通过实例进行解析。...

    子窗口刷新父窗口总结

    ### 子窗口刷新父窗口技术总结 在网页开发中,我们常常遇到需要在子窗口完成某些操作后,刷新或更新父窗口数据的情况。这在诸如弹出框进行数据编辑、表单提交等场景中尤为常见。本文档将深入探讨如何在子窗口关闭时...

    Qt 子窗口父窗口切换,窗口间传值

    在Qt编程中,子窗口与父窗口之间的交互是常见的需求,包括窗口间的切换和数据传递。这涉及到Qt的窗口系统和信号与槽机制。本文将深入探讨如何在Qt环境中实现子窗口与父窗口的切换以及如何在窗口之间传递数据。 首先...

    MDI子窗口管理及子窗口创建

    每个子窗口都会与一个特定的文档类关联,以便打开或创建相应的文档。 2. **激活子窗口**:MDI应用程序允许用户在多个子窗口间切换。`MDIFrame::ActivateNext`和`MDIFrame::ActivatePrev`函数可以用来激活下一个或上...

    Qt--子窗口向父窗口传值

    在Qt框架中,窗口之间的通信是通过信号与槽机制实现的,这是一种事件驱动的编程模型。本主题将详细探讨如何在Qt中实现从子窗口(子对话框)向父窗口传递数据,具体涉及的主要文件包括`mainwindow.cpp`、`main.cpp`、...

    子窗口传值到父窗口.rar

    在Web开发中,有时我们需要在子窗口与父窗口之间传递数据。这通常发生在弹出窗口或者框架集等场景中,用户在子窗口进行操作后,需要将结果反馈给父窗口,以便更新父窗口的状态或展示相关信息。这个过程就称为“子...

    子窗口与父窗口刷新

    在Java Web开发中,"子窗口与父窗口刷新"是一个常见的交互场景,特别是在构建多层级界面或模态对话框时。这里的"子窗口"通常指的是弹出的窗口、框架或者iframe,而"父窗口"则是打开子窗口的那个主页面。在这样的场景...

    javascript 父窗口、子窗口传值问题

    在JavaScript编程中,父窗口与子窗口之间的通信是一种常见的需求,特别是在构建多窗口应用程序或弹出窗口时。本文将深入探讨如何在JavaScript中实现父窗口与子窗口之间的数据传递。 首先,我们需要理解“父窗口”和...

    jsp与javascript配合,父窗口与子窗口之间刷新

    本示例探讨的是如何将JSP与JavaScript结合,实现父窗口与子窗口之间的数据通信及页面刷新功能,特别涉及了Ajax查询数据和表格渲染。以下是关于这些知识点的详细解释: 1. **JSP(JavaServer Pages)**:JSP是一种...

    HTML 父窗口打开子窗口,并接收子窗口返回的值.zip

    在这个名为"HTML 父窗口打开子窗口,并接收子窗口返回的值"的示例中,我们主要探讨如何利用JavaScript在HTML页面中打开新的子窗口,并在子窗口与父窗口之间进行通信,传递数据。 首先,`index.html`很可能是主页面...

    C#父窗口子窗口示例

    在C#编程中,"父窗口子窗口示例"通常是指在Windows Forms应用程序中创建一个主窗口(父窗口)并在其内部嵌套一个或多个子窗口。这种设计模式广泛应用于多文档界面(MDI,Multiple Document Interface)或者对话框式...

    子窗口向父窗口传递值

    本文将详细介绍如何在父窗口和子窗口之间传递数据,重点是“子窗口向父窗口传递值”。 首先,我们来看如何打开子窗口并传递数据。通常,我们可以使用`window.open()`函数来创建一个新的浏览器窗口。例如: ```...

    父窗口与子窗口间的调用

    ### 父窗口与子窗口间的调用及值的传递 在Web开发中,经常会遇到需要在父窗口和子窗口之间进行数据交换的情况。本文将详细介绍如何使用JavaScript实现父窗口与子窗口之间的调用以及值的传递。 #### 一、基本概念 ...

    HTML中IFrame父窗口与子窗口相互操作

    子窗口也可以操作自身的属性,例如调整自身大小、位置,或者与父窗口通信,通过`window.self`来引用自身。 在实际应用中,可能还需要处理跨域安全问题,因为默认情况下,不同源的`&lt;iframe&gt;`不支持JavaScript的交互...

    js父窗口跟子窗口的互刷

    在JavaScript编程中,"父窗口跟子窗口的互刷"是指在浏览器环境中,一个窗口(父窗口)与打开的新窗口(子窗口)之间进行数据交换和状态更新的技术。这种技术通常用于实现弹出窗口间的通信,例如购物车详情或者多步骤...

    showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口

    但是,由于同源策略的限制,只有当子窗口与父窗口位于同一域时,才能修改父窗口的值。例如,子窗口可以这样设置父窗口的变量: ```javascript window.opener.someVariable = "新值"; ``` **子窗口关闭时返回值到父...

Global site tag (gtag.js) - Google Analytics