ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを解析して親のwindow_jqueryの要素を取得します。

jqueryを解析して親のwindow_jqueryの要素を取得します。

WBOY
WBOYオリジナル
2016-05-16 17:31:12886ブラウズ

("#父窗口元素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()メソッドを使用して作成された子ウィンドウが通信したい場合親ウィンドウの場合、親ウィンドウ オブジェクトを取得するために 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("age").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;
//親ウィンドウに年齢属性値を設定します
parent.document.getElementByIdx_x("age") .value=x;
上記は、JavaScript を使用してプロジェクトのサブウィンドウの問題を解決するときに収集し蓄積したいくつかの方法と情報です。私はモーダルウィンドウを作成することで実装しましたが(これは主にプロジェクト自体に関係します)、実際には、パラメーターの受け渡しやその他の操作に window.open() を使用するか window.showModelDialog() を使用するか、いくつかの実装方法がありますが、は大きな違いで、最初は少し戸惑うかもしれませんが、子ウィンドウと親ウィンドウの関係と役割を明確にしておくと、簡単に理解できるようになります。