Last modified:2013-10-10 17:44:34
*********************************************
一,创建子窗口的方法:
1,使用window.open()方法:
window.open(URL,windowName,parameters);
URL:要打开的连接
WindowName:打开的子窗口的名字,如果为“_blank”效果和“a”标签里面target=”_blank”一样,打开一个新窗口
Parameter:一些可定制的参数 (下面提供了DHTML文件可以查阅)
e.g:
打开一个 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
使用window.showModalDialog()方法创建(showModelessDialog方法我试了一下就ie好使,google和firefox都不支持)
window.showModalDialog(sURL,vArguments,sFeatures);
参数说明:
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个字符。也可以传递对象
e.g:
//打开一个对话框并将父类的应用传递给子窗体
window.showModalDialog(url,window.document);
二,子父窗口间通信
都可以使用window.opener引用到父窗口。
如:
window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路径名
//刷新父页面
window.location.href=window.location.href ; //重新定位父页面
window.location.reload;
使用showModelDialog打开的窗口,可以在打开子窗口的时候将父类的引用通过参数传递过去。
子窗口通过 var parent=widnow.dialogArguments;获取父类的引用。
e.g:
//通过子窗口提交父窗口中的表单: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;
e.g:在子窗口中设置父窗口的值
子窗口设置父窗口的值使用方法如下:
//子窗口中:
var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1;
//设置父窗口中age属性值
parent.document.getElementById("age").value=x;
记:为实现使用微博登录时弹出一个小窗口,使用showModelDialog打开一个子窗口的确挺好用,但是开发中发现有时会被浏览器拦截,不知道别人是怎么处理这问题的。纠结,最后没有采用弹窗方式而是采用了 window.location.href = URL;的方式。