Js/Jquery獲取iframe中的元素在Iframe中獲取父窗體的元素方法

2017.08.21

關(guān)注

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

js

在父窗口中獲取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");

ifmObj.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();

父窗獲取子窗口的IFrame中的JS方法

一、父窗口調(diào)用iframe子窗口方法 
1、HTML語(yǔ)法：<iframe name="myFrame" src="child.html"></iframe> 
2、父窗口調(diào)用子窗口：myFrame.window.functionName(); 
3、子窗品調(diào)用父窗口：parent.functionName(); 
簡(jiǎn)單地說(shuō),也就是在子窗口中調(diào)用的變量或函數(shù)前加個(gè)parent.就行 
4、父窗口頁(yè)面源碼：

復(fù)制代碼代碼如下:

<html>
<head>
<script type="text/javascript">
function say() {
alert("parent.html------>I'm at parent.html");
}
function callChild()
{
//document.frames("myFrame").f1();
myFrame.window.say();
}
</script>
</head>
<body>
<input type=button value="調(diào)用child.html中的函數(shù)say()" onclick="callChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>


5、子窗口頁(yè)面：

復(fù)制代碼代碼如下:

<html>
<head>
<script type="text/javascript">
function say()
{
alert("child.html--->I'm at child.html");
}
function callParent() {
parent.say();
}
</script>
</head>
<body>
<input type=button value="調(diào)用parent.html中的say()函數(shù)" onclick="callParent()">
</body>
</html>


二、iframe 父窗口和子窗口相互的調(diào)用方法 
1、IE中使用方法： 
父窗口調(diào)用子窗口：iframe_ID.iframe_document_object.object_attribute = attribute_value 
例子：onClick="iframe_text.myH1.innerText='http://www.pint.com';" 
子窗口調(diào)用父窗口：parent.parent_document_object.object_attribute = attribute_value 
例子：onclick="parent.myH1.innerText='http://www.pint.com';" 
2、Firefox中使用方法： 
上面在IE下沒(méi)有問(wèn)題，但在firefox下不正常。在firefox下，應(yīng)該是如下調(diào)用方法： 
父窗口調(diào)用子窗口：window.frames["iframe_ID"].document.getElementById("iframe_document_object"-).object_attribute = attribute_value 
例： window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://hi.jb51.net"; 
子窗口調(diào)用父窗口：parent.document.getElementById("parent_document_object").object_attribute = attribute_value 
例： parent.document.getElementById("myH1").innerHTML = "http://jb51.net"; 
3、完整的例子 
test.htm

復(fù)制代碼代碼如下:

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script language="javascript">
function show()
{
window.frames["iframe_text"].document.getElementById("myH1").innerHTML = "http://hi.jb51.net";
}
</script>
</HEAD>
<BODY>
<iframe height="350" width="600" src="iframe_test.htm" name="iframe_text"></iframe>
<form action="" method="post">
<input name="haha" id="haha" type="text" maxlength="30" value="haha" />
<br />
<textarea cols="50" rows="5" id="getAttributeMethod"></textarea>
<input type="button" onClick="show();" value="提交"/>
</form>
<h1 id="myH1">d</h1>
</BODY>
</HTML>


frame_test.htm

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<script language="javascript">
function show()
{
parent.document.getElementById("myH1").innerHTML = http://jb51.net;
}
</script>
<body>
<h1 id="myH1">ha</h1>
<form action="" method="post">
<input name="abc" id="abc" type="text" maxlength="30" value="abc" />
<br />
<textarea cols="50" rows="10" id="text"></textarea>
<br />
<input type="button" value="提交" onclick="show();"/>
</form>
</body>
</html>


test.htm里面firefox下訪問(wèn)iframe 必須用name，不能用id，所以要改為name="iframe_test" 。(http://chenling1018.blog.163.com/blog/static/1480254200811891041694/) 
三、在c#中如何動(dòng)態(tài)改變iframe的src值，動(dòng)態(tài)指向一個(gè)網(wǎng)頁(yè) 
1)如果是javascript腳本 
給iframe加一個(gè)ID如<iframe id=frmList…… 
在腳本寫(xiě) 
frmList.document.location=strNewUrl 
2)如果是后臺(tái)程序 
給iframe加一個(gè)ID，再加上runat=server 如<iframe id=frmList runat=server …… 
在程序里寫(xiě) 
frmList.Attributes.Add("src",strNewUrl);

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

jQuery 實(shí)現(xiàn)iframe 自適應(yīng)高度

jquery中對(duì) iframe的操作

jquery iframe操作

Jquery中獲取iframe的方法_ASp.net,編程聯(lián)盟

jquery取得iframe元素的方法

jQuery讀取和設(shè)定KindEditor的值

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

父窗獲取子窗口的IFrame中的JS方法