Introduction to the method of mutual operation and value assignment between JS child and parent windows_javascript skills

$("#父窗口元素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 | IE5] です。

status: ステータスバーを表示するかどうか。

デフォルトは、yes[Modal] または no[Modal] です。

値の範囲 {はい | いいえ | 0}

scroll: ダイアログ ボックスにスクロール バーを表示するかどうかを示します。

デフォルトは「はい」で、値の範囲は { はい | いいえ 1 | 0 | です。

HTA では、通常の Web ページでは通常使用されない属性もいくつか使用されます。

dialogHide: 印刷中または印刷プレビュー中にダイアログ ボックスを非表示にするかどうか。

デフォルトは no で、値の範囲は {yes | no 1 | 0 | です。

edge: ダイアログ ボックスの境界線のスタイルを指定します。

デフォルトは盛り上がっており、値の範囲は { 沈んだ | 盛り上がった } です。

装飾なし: デフォルトは no で、値の範囲は { yes | no 1 | 0 | です。

受信パラメータ:

ダイアログ ボックスにパラメータを渡すには、vArguments を介してパラメータを渡します。文字列型の場合、最大長は 4096 文字です。オブジェクトを渡すこともできます

例:

var newWin=window.showModalDialog(url,window,'dialogHeight:500px,dialogLeft:100px,dialogTop:100px,

dialogWidth:300px、ステータス:0、エッジ: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();

現時点では、パラメータ ウィンドウが親ウィンドウ オブジェクトです

子ウィンドウ内:

最初に親ウィンドウ オブジェクトを取得する必要があります。その後、親ウィンドウ オブジェクトを使用できます。
子ウィンドウの作成時にパラメータを渡すことで親ウィンドウ オブジェクトが渡されるため、子ウィンドウではウィンドウ パラメータを取得することによってのみ親ウィンドウ オブジェクトを取得できます。入手方法:

varparent=widnow.dialogArguments;
変数parentは親ウィンドウオブジェクトです。

例:

//子ウィンドウ form1 を通じて親ウィンドウのフォームを送信し、送信後にクエリ操作を実行します
varparent=window.dialogArguments;
parent.document.form1.action="QueryInfor. jsp";
parent.submit();

//親ページを更新します
varparent=window.dialogArguments;
parent.location.reload();

// 子ウィンドウから親ウィンドウに値を渡します
モーダル子ウィンドウで親ウィンドウに値を転送するには、window.returnValue

を使用する必要があります。

実装方法は以下のとおりです。

子ウィンドウ内:

//親ウィンドウのフィールドの値を取得し、値に 1 を加算して親ウィンドウに戻ります。
varparent=window.dialogArguments;
var x=parent.docuement.getElementById("年齢").value;
x=x 1；

//x 値を返します
window.returnValue=x;

親ウィンドウ内:

//子ウィンドウから値を取得します
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementByIdx_x("age" ) .value=newWin;

//親ウィンドウの値を子ウィンドウに設定する
親ウィンドウの値を子ウィンドウに直接設定するのは明確ではないようです。親ウィンドウで要素の値を直接設定する方が柔軟ですが、非現実的な方法を使用すると開発効率が低下するだけでなく、実際の状況と既存の実装方法によって異なります。しかし、実行の効率化により、実装方法やコーディング スタイルが不適切になることがよくあります。

子ウィンドウは親ウィンドウの値を次のように設定します:

サブウィンドウ内:

varparent=window.dialogArguments;
var x=parent.document.getElementByIdx_x("age").value;
x=x 1;
//親に年齢属性値を設定しますwindow
parent.document.getElementByIdx_x("age").value=x;

上記は、JavaScript を使用してプロジェクトのサブウィンドウの問題を解決する際に私が収集し蓄積したいくつかの方法と情報です。私はモーダルウィンドウを作成することで実装しましたが（これは主にプロジェクト自体に関係します）、実際には、パラメーターの受け渡しやその他の操作に window.open() を使用するか window.showModelDialog() を使用するか、いくつかの実装方法がありますが、は大きな違いで、最初は少し戸惑うかもしれませんが、子ウィンドウと親ウィンドウの関係と役割を明確にしておくと、簡単に理解できるようになります。