JS 자식과 부모 windows_javascript 기술 간의 상호 운용 및 값 할당 방법 소개

$("#父窗口元素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 }。

크기 조정 가능: 크기를 조정할 수 있는지 여부입니다.

기본값은 no이고, 값 범위는 {yes | no 1 |

status: 상태 표시줄을 표시할지 여부입니다.

기본값은 yes[Modal] 또는 no[Modal]입니다.

값 범위 {예 | 아니요 1 |

스크롤: 대화 상자에 스크롤 막대가 표시되는지 여부를 나타냅니다.

기본값은 yes이며, 값 범위는 { yes | no 1 |

HTA에는 일반 웹페이지에서는 일반적으로 사용되지 않는 여러 속성이 사용됩니다.

dialogHide: 인쇄 또는 인쇄 미리보기 중에 대화 상자를 숨길지 여부입니다.

기본값은 no이며, 값 범위는 { yes | no 1 |

edge: 대화 상자의 테두리 스타일을 지정합니다.

기본값은 올림이며, 값 범위는 { sunken |

표시되지 않음: 기본값은 no, 값 범위는 { yes | no 1 |

들어오는 매개변수:

매개변수를 대화 상자에 전달하기 위해 vArguments를 통해 전달됩니다. 유형에는 제한이 없습니다. 문자열 유형의 경우 최대 길이는 4096자입니다. 객체를 전달할 수도 있습니다

예:

var newWin=window.showModalDialog(url,window,'dialogHeight:500px,DialogLeft:100px,DialogTop:100px,

dialogWidth:300px, 상태:0, edge:sunken');

newWin.open();

window.open() 메소드를 사용하여 윈도우를 생성하는 것과 비교하여, 모달 방식으로 윈도우를 생성하는 경우의 차이점은 모달 방식으로 윈도우를 생성한 후에는 상위 윈도우를 동작할 수 없다는 점입니다.

2. 자식 창과 부모 창 간의 통신

(1) window.open()을 사용하여 생성된 창은 상위 창과 통신합니다.
자식 창 페이지에서 window.opener를 통해 상위 창 객체를 얻을 수 있으며, 이를 얻은 후 하위 창을 새로 고칠 수 있습니다. 상위 창. 값 전달과 같은 작업.
예:
window.opener.location.reload(); //하위 창은 상위 창을 새로 고칩니다.
window.opener.location.href //상위 창 href를 가져옵니다
창. 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();

이때 매개변수 창이 상위 창 개체입니다

하위 창:

먼저 상위 창 개체를 가져와야 하며 그런 다음 상위 창 개체를 사용할 수 있습니다.
자식 창을 생성할 때 매개 변수를 전달하여 부모 창 개체를 전달하므로 부모 창 개체는 창 매개 변수를 얻어야 자식 창에서만 얻을 수 있습니다. 획득 방법:

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(" 나이").값;
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()를 사용하는지 여부가 있습니다. 큰 차이가 있습니다. 처음 접할 때 다소 혼란스러울 수도 있지만, 자식 창과 부모 창 사이의 관계와 역할을 명확하게 설명하면 이해하기 쉬울 것입니다.