當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery、js父子页面操作总结

發(fā)布時(shí)間：2025/4/14 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery、js父子页面操作总结小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jquery 父、子頁面之間頁面元素的獲取，方法的調(diào)用

https://www.cnblogs.com/it-xcn/p/5896231.html

一、jquery 父、子頁面之間頁面元素的獲取，方法的調(diào)用：

1. 父頁面獲取子頁面元素：

? ? 格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();?

? ? 實(shí)例：$("#ifm").contents().find("#iBtnOk").click(); // ifm 為 <iframe> 標(biāo)簽 id; iBtnOk 為子頁面按鈕 id
?

2. 父頁面調(diào)用子頁面方法：

? ? 格式：$("#iframe的ID")[0].contentWindow.iframe方法();?

? ? 實(shí)例：$("#ifm")[0].contentWindow().iClick(); // ifm 為 <iframe> 標(biāo)簽 id; iClick為子頁面 js 方法
??

3. 子頁面獲取父頁面元素：
?

? ? 格式：$("#父頁面元素id" , parent.document);
?

? ? 實(shí)例：$("#pBtnOk" , parent.document).click(); // pBtnOk 為父頁面標(biāo)簽 id
?

二、原生 js 父頁面元素的獲取，方法的調(diào)用：
?
1. 子頁面調(diào)用父頁面方法：
?

? ? 格式：parent.父頁面方法
?

? ? 實(shí)例：parent.pClick(); // pClick 為父頁面 js 方法
?

2. 子頁面獲取父頁面元素：?

? ? 格式：window.parent.document.getElementById("父窗口元素ID");

? ? 實(shí)例：window.parent.document.getElementById("pBtnOk");// pBtnOk為父頁面標(biāo)簽 id

========

jquery 獲取父窗口的元素、父窗口、子窗口

https://www.cnblogs.com/goloving/p/7642381.html

一、獲取父窗口元素：

　　$("#父窗口元素ID",window.parent.document)；對(duì)應(yīng)javascript版本為window.parent.document.getElementById("父窗口元
素ID")；

　　取父窗口的元素方法：$(selector, window.parent.document);

　　那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);

　　類似的，取其它窗口的方法大同小異

　　$(selector, window.top.document);

　　$(selector, window.opener.document);

　　$(selector, window.top.frames[0].document);

二、Javascript彈出子窗口

　　可以通過多種方式實(shí)現(xiàn)，下面介紹幾種方法

(1) 通過window對(duì)象的open()方法，open()方法將會(huì)產(chǎn)生一個(gè)新的window窗口對(duì)象

　　其用法為：window.open(URL,windowName,parameters);

　　URL: 描述要打開的窗口的URL地址，如何為空則不打開任何網(wǎng)頁；

　　windowName:描述被打開的窗口的名稱，可以使用'_top'、'_blank'等內(nèi)建名稱，這里的名稱跟<a href="..." target="...">
里的target屬性是一樣的。

　　parameters:描述被打開的窗口的參數(shù)值，或者說是樣貌，其包括窗口的各個(gè)屬性值，及要傳入的參數(shù)值。

　　例如：

//打開一個(gè)400 x 100 的干凈的窗口：
open
('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resiz
able=yes')

//也可以這樣寫：
var newWindow = open('','_blank');
　　參數(shù)說明如下：

top=# 窗口頂部離開屏幕頂部的像素?cái)?shù)

left=# 窗口左端離開屏幕左端的像素?cái)?shù)

width=# 窗口的寬度

height=# 窗口的高度

menubar=... 窗口有沒有菜單，取值yes或no

toolbar=... 窗口有沒有工具條，取值yes或no

location=... 窗口有沒有地址欄，取值yes或no

directories=... 窗口有沒有連接區(qū)，取值yes或no

scrollbars=... 窗口有沒有滾動(dòng)條，取值yes或no

status=... 窗口有沒有狀態(tài)欄，取值yes或no

resizable=... 窗口給不給調(diào)整大小，取值yes或no

　　(2) 在javascript中除了通過open()方法建立window對(duì)象實(shí)現(xiàn)彈出窗口外，還可以通過建立對(duì)話框的方式彈出窗口。如：

alert(""); //彈出信息提示對(duì)話框

confirm(""); //彈出信息確認(rèn)對(duì)話框

prompt(""); //具有交互性質(zhì)的對(duì)話框

　　但是，上述實(shí)現(xiàn)的彈出窗口具有的功能較為單一，只能完成較為簡單的功能。對(duì)于需要在對(duì)話框中顯示多個(gè)數(shù)據(jù)信息，甚至是
HTML控件就無能為力了。

　　(3) 使用模態(tài)對(duì)話框?qū)崿F(xiàn)復(fù)雜的對(duì)話框需求

　　在javascript的內(nèi)建方法中還有一類方法可以實(shí)現(xiàn)通過對(duì)話框顯示HTML內(nèi)容，也就是說可以通過創(chuàng)建對(duì)話框的方式來完成創(chuàng)建
窗口對(duì)象所能完成的功能。

　　包括創(chuàng)建模態(tài)對(duì)話框和非模態(tài)對(duì)話框兩種。

?　　實(shí)現(xiàn)方法為：?

//創(chuàng)建模態(tài)你對(duì)話框

window.showModalDialog(sURL,vArguments,sFeatures)

//創(chuàng)建非模態(tài)對(duì)話框

window.showModelessDialog(sURL,vArguments,sFeatures)

　　其區(qū)別在于：用showModelessDialog()打開窗口時(shí)，不必用window.close()去關(guān)閉它，當(dāng)以非模態(tài)方式［IE5］打開時(shí)，打開
對(duì)話框的窗口仍可以進(jìn)行其他的操作，即對(duì)話框不總是最上面的焦點(diǎn)，當(dāng)打開它的窗口URL改變時(shí)，它自動(dòng)關(guān)閉。而模態(tài)［IE4］方
式的對(duì)話框始終有焦點(diǎn)（焦點(diǎn)不可移走，直到它關(guān)閉）。模態(tài)對(duì)話框和打開它的窗口相聯(lián)系，因此我們打開另外的窗口時(shí)，他們的
鏈接關(guān)系依然保存，并且隱藏在活動(dòng)窗口的下面。showModeDialog()則不然。

　　參數(shù)說明：

sURL：必選參數(shù)，類型：字符串。用來指定對(duì)話框要顯示的文檔的URL

vArguments：可選參數(shù)，類型：變體。用來向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限，包括數(shù)組等。對(duì)話框通過
window.dialogArguments來取得傳遞進(jìn)來的參數(shù)

sFeatures：選參數(shù)，類型：字符串。用來描述對(duì)話框的外觀等信息，可以使用以下的一個(gè)或幾個(gè)，用分號(hào)“;”隔開

dialogHeight：對(duì)話框高度，不小于100px，IE4中dialogHeight和dialogWidth 默認(rèn)的單位是em，而IE5中是px，為方便其見，在
定義modal方式的對(duì)話框時(shí)，用px做單位

dialogWidth: 對(duì)話框?qū)挾?/p>

dialogLeft: 距離桌面左的距離

dialogTop: 離桌面上的距離

center: 窗口是否居中，默認(rèn)yes，但仍可以指定高度和寬度,取值范圍{yes | no | 1 | 0 }

help: 是否顯示幫助按鈕，默認(rèn)yes，取值范圍{yes | no | 1 | 0 }

resizable: 是否可被改變大小，默認(rèn)no，取值范圍{yes | no | 1 | 0 } ［IE5+］

status: 是否顯示狀態(tài)欄，默認(rèn)為yes[ Modeless]或no[Modal]，取值范圍{yes | no | 1 | 0 } ［IE5+］

scroll:指明對(duì)話框是否顯示滾動(dòng)條，默認(rèn)為yes，取值范圍{ yes | no | 1 | 0 | on | off }

還有幾個(gè)屬性是用在HTA中的，在一般的網(wǎng)頁中一般不使用。

dialogHide:在打印或者打印預(yù)覽時(shí)對(duì)話框是否隱藏，默認(rèn)為no，取值范圍{ yes | no | 1 | 0 | on | off }。

edge:指明對(duì)話框的邊框樣式，默認(rèn)為raised，取值范圍{ sunken | raised }。

unadorned:默認(rèn)為no，取值范圍{ yes | no | 1 | 0 | on | off }。
?

　　傳入?yún)?shù)：要向?qū)υ捒騻鬟f參數(shù)，是通過vArguments來進(jìn)行傳遞的。類型不限制，對(duì)于字符串類型，最大為4096個(gè)字符。也可
以傳遞對(duì)象

var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px,
dialogTop:100px,dialogWidth:300px, status:0, edge:sunken');
newWin.open();
　　與使用window.open()方法創(chuàng)建窗口相比，模態(tài)方法創(chuàng)建窗口的區(qū)別在于有模態(tài)方法創(chuàng)建的窗口后將不能操作父窗口。

三、子窗口與父窗口間通信：

　　(1) 使用window.open()創(chuàng)建的窗口與父窗口通信

　　可以在子窗口頁面中通過window.opener來獲取父窗口對(duì)象，獲取之后子窗口便可以對(duì)父窗口執(zhí)行刷新，傳值等操作。

window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //獲取父窗口href
window.opener.locaiton.pathname //獲取父窗口路徑名

//刷新父頁面
window.location.href=window.location.href ; //重新定位父頁面
window.location.reload;

　　(2) 模態(tài)窗口與父窗口通信

　　通過使用showModelDialog() 及showModelessDialog() 方法創(chuàng)建的子窗口想與父窗口通信時(shí)，不能通過window.opener來獲取
父窗口對(duì)象。

　　要實(shí)現(xiàn)通信，必須在創(chuàng)建模態(tài)子窗口時(shí)向子窗口傳入父窗口對(duì)象。

?　　（一）實(shí)現(xiàn)方式為：

　　1、在父窗口中：

var newWin=window.showModelDialog(url,window,'');

newWin.open();

此時(shí)參數(shù)window即是父窗口對(duì)象

　　2、在子窗口中：

　　需首先獲取父窗口對(duì)象，然后才能使用父窗口對(duì)象。由于父窗口對(duì)象是在創(chuàng)建子窗口時(shí)通過傳入?yún)?shù)的方式傳入的，因此，在
子窗口中也只能通過獲取窗口參數(shù)的方式獲取父窗口對(duì)象。獲取方式如下：

　　var parent=widnow.dialogArguments；

　　變量parent便是父窗口對(duì)象。

//通過子窗口提交父窗口中的表單：form1,提交后執(zhí)行查詢操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//刷新父頁面
var parent=window.dialogArguments;
parent.location.reload();

　　從子窗口傳值到父窗口：要實(shí)現(xiàn)在模態(tài)子窗口中傳值到父窗口，需要使用window.returnValue完成

　　（二）實(shí)現(xiàn)方法如下：

　　1、在子窗口中：

//獲取父窗口某字段值，對(duì)該值加一后返回父窗口
var parent=window.dialogArguments;//獲取父窗口對(duì)象
var x=parent.docuement.getElementById("age").value;
x=x+1；
?
//傳回x值
window.returnValue=x;

　　2、在父窗口中：

//獲取來自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null){
? ? document.getElementById("age").value=newWin;
}
　　（三）在子窗口中設(shè)置父窗口的值

　　在子窗口中向父窗口中傳入值似乎沒有直接設(shè)置父窗口中的值來得明了。直接設(shè)置父窗口中元素的值顯得要更靈活一些，不過
具體使用哪種方法要根據(jù)實(shí)際情況和已有的實(shí)現(xiàn)方式而定，因?yàn)槿绻褂昧瞬磺袑?shí)際的方法不僅降低開發(fā)效率，也降低了執(zhí)行效率
，往往也會(huì)造成不優(yōu)雅的實(shí)現(xiàn)方式和代碼風(fēng)格。

　　子窗口設(shè)置父窗口的值使用方法如下：

　　1、子窗口中：

var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1;
　　2、設(shè)置父窗口中age屬性值

parent.document.getElementById("age").value=x;
　　

　　以上是我在項(xiàng)目中使用javascript解決子窗口問題時(shí)，收集及積累的一些方法和資料。其實(shí)不論是使用window.open()還是使
用window.showModelDialog()進(jìn)行傳參等操作時(shí)，雖然在實(shí)現(xiàn)方法上有很大的差別，初次接觸會(huì)覺得有點(diǎn)亂，但只要理清子窗口與
父窗口之間的關(guān)系和角色之后，就很好理解了。

========

利用JQuery操作iframe父頁面、子頁面的元素和方法匯總

https://www.jb51.net/article/123314.htm

主要給大家介紹了關(guān)于利用JQuery操作iframe父頁面、子頁面的元素和方法的相關(guān)資料，

iframe在復(fù)合文檔中經(jīng)常用到，利用jquery操作iframe可以大幅提高效率，本文主要給大家分享了關(guān)于簡單使用JQUERY來操作
IFRAME的一些記錄，這個(gè)使用純JS也可以實(shí)現(xiàn)。

第一、在iframe中查找父頁面元素的方法：
?
$('#id', window.parent.document)
?
第二、在父頁面中獲取iframe中的元素方法：
?
$(this).contents().find("#suggestBox")
?
第三、在iframe中調(diào)用父頁面中定義的方法和變量：

parent.method parent.value
?
JQUERY、JS調(diào)用IFRAME父窗口與子窗口元素的方法

1. jquery 在iframe子頁面獲取父頁面元素代碼如下:

$("#objid", parent.document)
?
2. jquery在父頁面獲取iframe子頁面的元素代碼如下:
?
$("#objid",document.frames('iframename').document)
?
3.js 在iframe子頁面獲取父頁面元素代碼如下:

indow.parent.document.getElementByIdx_x("元素id");
?
4.js 在父頁面獲取iframe子頁面元素代碼如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");?

5.子類iframe內(nèi)調(diào)用父類函數(shù)：

window.parent.func();
?
========

jquery 父子頁面?zhèn)鲄⒌慕鉀Q方案

https://blog.csdn.net/zxmin1302/article/details/83623023

父頁面相關(guān)：

按鈕：

<button class="btn tab btn-default" value="1" id="tz" style="height: 35px;width: 135px;">跳轉(zhuǎn)</button>
js邏輯：

$('#tz').on('click',function(){
? ? ? ? window.open('xxxx?data=1', '_blank', 'height=900, width=1000, top=0, left=0, toolbar=no, menubar=no,
scrollbars=no, resizable=no, location=no, status=no');
});
function returnDataParam(data){
? ? console.log(data);
? ? return data;
}
獲取子頁面的url參數(shù)

//獲取url參數(shù)
function GetQueryString(name) {
? ? var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
? ? var r = window.location.search.substr(1).match(reg);
? ? if(r!=null)return ?unescape(r[2]); return null;
}
子頁面?zhèn)鲄?#xff1a;

var data = GetQueryString(data);
if(data==1){
? ? var dataParam = {
? ? ? ?url : 'xxxx',
? ? ? ?indicators :'xxxx',
? ? ? ?conditions : 'xxxx'
? ? ?}
? ? ?//條件篩選整理成相關(guān)的字符串
? ? ? ? ? ?
? ? //獲取數(shù)據(jù)參數(shù)
? ? alert('數(shù)據(jù)提取成功!');
? ? window.opener.returnDataParam(dataParam);
? ? //關(guān)閉當(dāng)前窗口
? ? ?window.close();
} ? ? ? ? ? ? ? ? ? ?
?
========

JS 和 JQuery 對(duì) Iframe 內(nèi)外（父子）頁面進(jìn)行操作

https://blog.csdn.net/andseny/article/details/53138509

在web開發(fā)中，經(jīng)常會(huì)用到iframe，難免會(huì)碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

在父窗口中獲取iframe中的元素

1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();

? ? ?實(shí)例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();

2、var obj=document.getElementByIdx_x("iframe的name").contentWindow;

? ? ?var ifmObj=obj.document.getElementByIdx_x("iframe中控件的ID");

? ? ? fmObj.click();

實(shí)例：var obj=document.getElementByIdx_x("ifm").contentWindow;

? ? ? ? ? var ifmObj=obj.document.getElementByIdx_x("btnOk");

? ? ? ? ? ifmObj.click();

在iframe中獲取父窗口的元素

格式：window.parent.document.getElementByIdx_x("父窗口的元素ID").click();

實(shí)例：window.parent.document.getElementByIdx_x("btnOk").click();

jquery

在父窗口中獲取iframe中的元素

1、格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

? ? ?實(shí)例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

2、格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

? ? ?實(shí)例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中獲取父窗口的元素

格式：$('#父窗口中的元素ID', parent.document).click();

實(shí)例：$('#btnOk', parent.document).click();

新增方法：

1.js在iframe子頁面操作父頁面元素代碼：

window.parent.document.getElementByIdx_x("父頁面元素id");
2.js在父頁面獲取iframe子頁面元素代碼如下:

window.frames["iframe_ID"].document.getElementByIdx_x("子頁面元素id");
3. jquery在iframe子頁面獲取父頁面元素代碼如下:

$("#objid",parent.document)
4. jquery在父頁面獲取iframe子頁面的元素·

$("#objid",document.frames('iframename').document)
5.在iframe中調(diào)用父頁面中定義的方法和變量：

window.parent.window.parentMethod();
window.parent.window.parentValue;
6.在父頁面操作iframe子頁面的方法和變量

//code from http://caibaojian.com/js-get-iframe.html
window.frames["iframe_ID"].window.childMethod();
window.frames["iframe_ID"].window.childValue;

========

jquery_iframe父子級(jí)頁面事件使用

https://www.cnblogs.com/sugege/p/7902766.html

1、index.html

<body topmargin='0' leftmargin='0' style="background:#ccc">　　　　//這里的屬性只是為了全屏下邊無間隙
　　index.html
? ? <iframe src="main.html" id="indexMain" style="margin-bottom:-5px;position:relative;"></iframe>　　　　//這里的
樣式的為了跳轉(zhuǎn)之后移動(dòng)端input輸入完成之后下邊無間隙
</body>

2、main.html

========
?

總結(jié)

以上是生活随笔為你收集整理的jquery、js父子页面操作总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Sql Server 2008 精简版(
下一篇：使用Notepad++ 删除非连续的列内