`
likeenicee
  • 浏览: 8654 次
  • 性别: Icon_minigender_1
  • 来自: 暗暗的
社区版块
存档分类
最新评论

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

阅读更多

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()进行传参等操作时虽然在实现方法上有很大的差别,初次接触会觉得有点乱,但只要理清子窗口与父窗口之间的关系和角色之后,就很好理解了。

 

分享到:
评论

相关推荐

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

    NULL 博文链接:https://wangjie2013.iteye.com/blog/1954466

    C#中子窗口与父窗口通信

    父窗口(Form1):一个“Label1”,一个“button1” 子窗体(Form2):一个“textBox1”,一个“确定”按钮,一个“取消”按钮 功能:双击Form1中的button1,弹出Form2,往Form2的textBox1中输入内容,单击“确定”...

    JavaScript实际应用子窗口和父窗口

    子窗口和父窗口通信,蛮详细的教程

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

    本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法(含JS、JQuery方法)

    非模式对话框与父窗体之间消息通信,设置透明窗体

    模式对话框作为父窗体,与非模式子对话框之间通过自定义消息通讯,同时设置子对话框为透明窗体。

    【QT】父组件与子组件的相互通信例子(用signal-slot实现)

    【QT】父组件与子组件的相互通信例子(用signal-slot实现) 目标: 新建一个QMainWindow窗口,在该窗口中添加一个打开按钮,一个spinBox,点击打开按钮后弹出一个对话框,对话框里面有一个slider。改变slider后...

    pyqt父子窗口相互传值

    pyqt父子窗口相互传值 pyqt信号槽的使用 对新手可能有帮助

    浙江理工大学操作系统实验2:进程通信报告

    子进程读字符串,将里面的字符反向后再交给父进程,父进程最后读取并打印反向的字符串。 任务二、 (1) 阅读例2的程序,运行一次该程序,然后用ipcs命令查看系统中共享存储区的情况,再次执行该程序,再用ipcs命令...

    在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    在项目中,需要实现一个在表格里面点击操作,然后弹出layer层,将父层表格的行值传给子页面,子页面拿到值后,进行业务处理,从而实现真正的父子页面交互。 其实,官方文档都说的很清楚了。 layui官方文档:...

    VISUAL C++MFC扩展编程实例(想学MFC的朋友一定不要错过)

    1.1.4 重叠窗口、弹出窗口和子窗口 2 1.1.5 父窗口和宿主窗口 3 1.2 Windows消息 3 1.2.1 发送或寄送消息 4 1.2.2 消息类型 4 1.2.3 接收消息 4 1.2.4 窗口处理函数的子类化 5 1.3 窗口绘图 5 1.3.1 设备环境 5 ...

    VISUAL C MFC扩展编程实例与源码

    1.1.4 重叠窗口、弹出窗口和子窗口 2 1.1.5 父窗口和宿主窗口 3 1.2 Windows消息 3 1.2.1 发送或寄送消息 4 1.2.2 消息类型 4 1.2.3 接收消息 4 1.2.4 窗口处理函数的子类化 5 1.3 窗口绘图 5 1.3.1 设备...

    一份很实用的MFC资料

    1.1.4 重叠窗口、弹出窗口和子窗口 2 1.1.5 父窗口和宿主窗口 3 1.2 Windows消息 3 1.2.1 发送或寄送消息 4 1.2.2 消息类型 4 1.2.3 接收消息 4 1.2.4 窗口处理函数的子类化 5 1.3 窗口绘图 5 1.3.1 设备环境 5 ...

    Visual C++ MFC扩展编程实例.PDF

    1.1.4 重叠窗口、弹出窗口和子窗口 2 1.1.5 父窗口和宿主窗口 3 1.2 Windows消息 3 1.2.1 发送或寄送消息 4 1.2.2 消息类型 4 1.2.3 接收消息 4 1.2.4 窗口处理函数的子类化 5 1.3 窗口绘图 5 1.3.1 设备环境 5 ...

    VISUAL C++MFC扩展编程实例

    1.1.4 重叠窗口、弹出窗口和子窗口 2 1.1.5 父窗口和宿主窗口 3 1.2 Windows消息 3 1.2.1 发送或寄送消息 4 1.2.2 消息类型 4 1.2.3 接收消息 4 1.2.4 窗口处理函数的子类化 5 1.3 窗口绘图 5 1.3.1 设备环境 5 ...

    双管道(CreatePipe)与本地cmd.exe进程通信.exe

    在本地,用父进程创建一个cmd.exe子进程,这个子进程的输入输出被重定向到两条匿名管道,从而实现与父进程通信。父进程输入命令到一条管道,子进程读取后执行并输出到另一条管道,父进程读取后输出到窗口。此版本源...

    vue组件父与子通信详解(一)

    主要为大家详细介绍了vue组件父与子通信详解,实现登录窗口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    操作系统实验3.doc

    实验目的 熟悉管道通信,了解管道内数据的读取与写入过程; 学会创建管道、使用管道,实现父子进程间的通信; 熟悉各种管道通信时使用的函数; 熟悉共享内存的概念; 学会使用函数创建共享内存段,熟悉操纵共享内存...

    Window 消息大全

    在WM_NOTIFY消息,使用此控件能使某个控件与它的父控件之间进行相互通信 WM_CONTEXTMENU= $007B //当用户某个窗口中点击了一下右键就发送此消息给这个窗口 WM_styleCHANGING= $007C //当调用SETWINDOWLONG函数将要...

    易语言 茶凉专用模块

    参数 状态, 整数型, 可空, 可空:按键(按下+放开) 1 #按键_ 3 #按下_ 4 #放开_ 如果状态大于等于5则为按下与放开之间的延时,可解决某些屏蔽 .参数 功能键方式, 逻辑型, 可空, 默认为普通键, 真:功能键方式模拟,如ctrl...

    API之网络函数---整理网络函数及功能

    CreateFile 打开和创建文件、管道、邮槽、通信服务、设备以及控制台 CreateFileMapping 创建一个新的文件映射对象 DeleteFile 删除指定文件 DeviceIoControl 对设备执行指定的操作 DosDateTimeToFileTime 将DOS...

Global site tag (gtag.js) - Google Analytics