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

js子窗口创建及父子窗口之间通信

阅读更多

js子窗口创建及父子窗口之间通信

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()方法创建窗口相比,模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口.


子窗口与父窗口间通信

(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;
作者:houfeng
出处:http://houfeng.cnblogs.com
本文版权归作者和博客园共有,未经作者同意请保留此声明.
分享到:
评论

相关推荐

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

    在IT领域,创建子窗口与子父窗口间的通信是一个重要的技术话题,特别是在开发多窗口应用程序或者Web应用时。本文将详细探讨这个主题,并基于提供的标签"源码"和"工具",以及压缩包中的"DHTML手册.chm",来解析相关的...

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

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

    js 控制父子窗口 转向

    标题"js 控制父子窗口 转向"所涉及的知识点主要集中在如何使用JavaScript来实现子窗口对父窗口的控制,以及父窗口对子窗口的导航操作。下面将详细阐述这些知识点。 首先,我们需要理解浏览器窗口的概念。在...

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

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

    子窗口通过js操作父窗口中的元素

    本教程将深入探讨如何在子窗口通过JS操作父窗口中的元素,涉及到的关键技术包括JavaScript、HTML和DOM(Document Object Model)。 1. **JavaScript基础知识**: - JavaScript是一种解释型的、轻量级的编程语言,...

    js父窗口跟子窗口的互刷

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

    window.open父子窗口传值问题

    当我们谈论“window.open父子窗口传值问题”,我们指的是在父窗口通过`window.open`创建了一个子窗口,并需要在两者之间进行数据通信的情况。 首先,让我们了解一下`window.open`的基本语法: ```javascript var ...

    js 父窗体子窗体数据交互

    "js 父窗体子窗体数据交互"这个主题涉及到JavaScript(js)技术,DHTML(动态HTML)以及相关的脚本编程。以下将详细介绍如何使用JavaScript来实现这种交互。 1. **JavaScript 基础**: JavaScript 是一种广泛使用...

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

    这种父子窗口的交互方式对于实现复杂网页应用,如页面内嵌、跨域通信等场景非常常见。以下将详细介绍如何在HTML中进行`&lt;iframe&gt;`父窗口与子窗口之间的交互操作。 首先,我们来看一些通用的方法: 1. **获取子窗口...

    javascript父子页面传参

    在JavaScript编程中,父子页面之间的通信是一个常见的需求,特别是在单页应用(SPA)或框架如Vue、React和Angular中。本篇文章将详细讲解如何在父子页面之间传递参数,并通过提供的DEMO文件(a.html、c.html、b.html...

    jquery父子窗口互相获取元素demo

    在这个“jquery父子窗口互相获取元素demo”中,我们将深入探讨如何利用jQuery来实现在父窗口与子窗口之间共享和操作DOM元素。 首先,`test.html`和`Untitled-1.html`可能是包含jQuery示例的两个网页文件。通常,父...

    js 父窗口控制子窗口的行为-打开,关闭,重定位,回复

    在实现以上功能时,需要注意的是父窗口和子窗口之间的关联和通信。在示例代码中,我们看到通过将子窗口的window对象赋值给父窗口的一个变量winID,从而创建了一个引用,使得父窗口可以通过这个引用来控制子窗口的...

    ie 模态弹窗 父子窗口交换数据

    5. **使用IFrame**:如果子窗口是一个嵌入在父窗口中的IFrame,那么可以直接通过JavaScript访问IFrame的`contentWindow`属性,从而实现双向通信。 在处理IE浏览器时,需要注意以下几点兼容性问题: - IE8及更早...

    JS简单实现父子窗口传值功能示例【未使用iframe框架】

    在这个场景中,我们通常会使用`window.open()`或`window.showModalDialog()`方法来创建子窗口,并通过特定的API来实现父子窗口之间的通信。在本示例中,我们将探讨如何在不使用iframe框架的情况下,利用JavaScript...

    iframe父页面与子页面通信及相互调用方法

    "iframe父页面与子页面通信及相互调用方法"是一个重要的主题,涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面(Parent Page)**:包含`iframe`...

    ShowModalDialog父窗体向子窗体传值

    总的来说,`showModalDialog`和`showModelessDialog`是JavaScript中用于创建弹出式对话框的两种方式,它们提供了在父窗口与子窗口之间传递数据的机制,同时也能够定制对话框的外观和行为。在实际应用中,根据需求...

    动态增删table以及后台传值和弹出窗口父子窗口传值

    在IT行业中,动态增删table和后台传值是前端与后端交互的重要技术,而弹出窗口父子窗口之间的数据传递则是提升用户体验的关键。下面将详细解释这些知识点。 首先,动态增删table是一种常见的用户界面设计,它允许...

    JS弹出窗口的各种传值方法.pdf

    总结来说,这个示例展示了JavaScript中使用`window.showModalDialog()`进行父子窗口间通信的方法。通过对话框参数和`window.returnValue`,可以方便地在两个窗口之间传递数据和控制窗口状态。这种方式对于需要在多个...

    js创建子窗口并且回传值示例代码

    在前端开发中,使用JavaScript创建子窗口,并从子窗口向父窗口回传数据是一项常用的技术。本文将详细介绍如何使用JavaScript创建子窗口以及如何实现值的回传。 首先,我们需要了解如何在父窗口中通过点击事件触发子...

    iframe父与子、子与子之间控制以及js相互调用实际例

    **iframe的父子、子与子之间的交互** 在Web开发中,有时我们需要在iframe中嵌入的页面与主页面,或者两个嵌套的iframe之间进行数据交换和功能交互。这可以通过JavaScript来实现,主要涉及以下几个方面: 1. **父...

Global site tag (gtag.js) - Google Analytics