("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID");
取父窗口的元素方法:$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);
类似的,取其它窗口的方法大同小异
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);
-----------------------------------------------------------------------------
子窗口创建及父窗口与子窗口之间通信:
1、Javascript弹出子窗口
可以通过多种方式实现,下面介绍几种方法
(1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象
其用法为:
window.open(URL,windowName,parameters);
URL: 描述要打开的窗口的URL地址,如何为空则不打开任何网页;
windowName:描述被打开的窗口的民称,可以使用'_top'、'_blank'等内建名称,这里的名称跟里的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() 메소드를 사용하여 생성된 하위 창과 통신하려는 경우 상위 창은 상위 창 개체를 가져오기 위해 상위 창 열기
와 통신할 수 없습니다. 통신을 수행하려면 모달 하위 창을 만들 때 상위 창 개체를 하위 창에 전달해야 합니다.
구현 방법은 다음과 같습니다.
상위 창에서:
var newWin=window.showModelDialog(url,window,'');
newWin.open();
이때 매개변수 창은 상위 창 개체입니다
자식 창에서는
필요합니다 부모 창 개체를 사용하기 전에 부모 창 첫 번째 개체를 가져옵니다.
자식 창을 생성할 때 매개 변수를 전달하여 부모 창 개체를 전달하므로 부모 창 개체는 창 매개 변수를 얻어야 자식 창에서만 얻을 수 있습니다. 획득 방법은 다음과 같습니다.
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를 사용하여 완료해야 합니다
구현 방법은 다음과 같습니다.
하위 창에서:
//상위 창의 필드 값을 가져와 해당 값에 1을 추가하고 반환합니다. 상위 창
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 .getElementByIdx_x("age").value=newWin;
//자식 창에 상위 창의 값을 설정합니다.
자식 창에서 상위 창으로 값을 전달해도 상위 창의 값이 직접 설정되지는 않는 것 같습니다. 부모 창에서 요소의 값을 직접 설정하는 것이 더 유연합니다. 그러나 어떤 방법을 사용할지는 실제 상황과 기존 구현 방법에 따라 다르며, 비현실적인 방법을 사용하면 개발 효율성이 떨어질 뿐만 아니라 , 실행 효율성으로 인해 종종 우아하지 않은 구현 방법과 코딩 스타일이 발생합니다.
하위 창은 상위 창의 값을 다음과 같이 설정합니다.
하위 창에서:
var parent=window.dialogArguments;
var x=parent .document.getElementByIdx_x("age").value;
x=x 1;
//상위 창에서 age 속성 값 설정
parent.document.getElementByIdx_x("age") .value=x;
위 내용은 제가 프로젝트에서 서브윈도우 문제를 해결하기 위해 자바스크립트를 사용하면서 수집하고 축적한 몇 가지 방법과 정보입니다. 모달 창을 만들어서 구현했는데(주로 프로젝트 자체와 관련이 있음) 실제로는 몇 가지 구현 방법이 있긴 하지만 매개변수 전달이나 기타 작업을 위해 window.open()이나 window.showModelDialog()를 사용하는지 여부가 있습니다. 큰 차이가 있습니다. 처음 접할 때 다소 혼란스러울 수도 있지만, 자식 창과 부모 창 사이의 관계와 역할을 명확하게 설명하면 이해하기 쉬울 것입니다.