JS⼦⽗窗⼝互相操作取值赋值的⽅法介绍
$("#⽗窗⼝元素ID",window.parent.document);
对应javascript版本为window.ElementByIdx_x("⽗窗⼝元素ID");
取⽗窗⼝的元素⽅法:$(selector, window.parent.document);
那么你取⽗窗⼝的⽗窗⼝的元素就可以⽤:$(selector, window.parent.parent.document);
类似的,取其它窗⼝的⽅法⼤同⼩异
$(selector, p.document);
$(selector, window.opener.document);
$(selector, p.frames[0].document);
--------------------------------------------------------------------------------------------------
⼦窗⼝创建及⽗窗⼝与⼦窗⼝之间通信:
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.load(); //⼦窗⼝刷新⽗窗⼝
window.opener.location.href //获取⽗窗⼝href
window.opener.locaiton.pathname //获取⽗窗⼝路径名
//刷新⽗页⾯
window.location.href=window.location.href ; //重新定位⽗页⾯
load;
(2) 模态窗⼝与⽗窗⼝通信
通过使⽤showModelDialog(),及showModelessDialog()⽅法创建的⼦窗⼝想与⽗窗⼝通信时,不能通过window.opener
来获取⽗窗⼝对象。要实现通信,必须在创建模态⼦窗⼝时向⼦窗⼝传⼊⽗窗⼝对象。
实现⽅式为:
在⽗窗⼝中:
var newWin=window.showModelDialog(url,window,'');
newWin.open();
此时参数window即是⽗窗⼝对象
在⼦窗⼝中:
需⾸先获取⽗窗⼝对象,然后才能使⽤⽗窗⼝对象。由于⽗窗⼝对象是在创建
js arguments⼦窗⼝时通过传⼊参数的⽅式传⼊的,因此,在⼦窗⼝中也只能通过获取窗⼝参数的⽅式获取⽗窗⼝对象。获取⽅式如下:
var parent=widnow.dialogArguments;
变量parent便是⽗窗⼝对象。
例如:
//通过⼦窗⼝提交⽗窗⼝中的表单:form1,提交后执⾏查询操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();
//刷新⽗页⾯
var parent=window.dialogArguments;
load();
//从⼦窗⼝传值到⽗窗⼝
要实现在模态⼦窗⼝中传值到⽗窗⼝,需要使⽤urnValue完成
实现⽅法如下:
在⼦窗⼝中:
//获取⽗窗⼝某字段值,对该值加⼀后返回⽗窗⼝
var parent=window.dialogArguments;
var x=ElementById("age").value;
x=x+1;
//传回x值
在⽗窗⼝中:
//获取来⾃⼦窗⼝的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
//在⼦窗⼝中设置⽗窗⼝的值
在⼦窗⼝中向⽗窗⼝中传⼊值似乎没有直接设置⽗窗⼝中的值来得明了。直接设置⽗窗⼝中元素的值显得要更灵活⼀些,不过具体使⽤哪种⽅法要根据实际情况和已有的实现⽅式⽽定,因为如果使⽤了不切实际的⽅法不仅降低开发效率,也降低了执⾏效率,往往也会造成不优雅的实现⽅式和代码风格。
⼦窗⼝设置⽗窗⼝的值使⽤⽅法如下:
⼦窗⼝中:
var parent=window.dialogArguments;
var x=ElementByIdx_x("age").value;
x=x+1;
//设置⽗窗⼝中age属性值
ElementByIdx_x("age").value=x;
以上是我在项⽬中使⽤javascript解决⼦窗⼝问题时,收集及积累的⼀些⽅法和资料。我是使⽤建⽴模态窗⼝的⽅式来实现的(这主要与项⽬本⾝有关),不过其实不论是使⽤window.open()还是使⽤window.showModelDialog()进⾏传参等操作时虽然在实现⽅法上有很⼤的差别,初次接触会觉得有点乱,但只要理清⼦窗⼝与⽗窗⼝之间的关系和⾓⾊之后,就很好理解了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论