jquery操作iframe中的元素和js函數

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、jquery操作iframe中的元素（2種方式）

var str = $(window.frames["iframe"].document).find("#ljiong").html();

var stk = $("#iframe").contents().find("#ljiong").html();

2、操作父介面中的元素（header：為某個元素的id）

$('#header', parent.document).text();

3、js調用iframe中的js函數（2種）

window.frames["ljiong"].window.testIframe2("ljiong");

document.getElementById("ljiong").contentWindow.testIframe2("ljiong");

4、jquery調用iframe的js函數（帶參數的會有傳回值）

$("#ljiong")[0].contentWindow.testIframe2("ljiong");

5. 調用父頁面js函數，直接用：

parent.myFunction();

注意事項：

1、要和所包含的iframe在同一個網域名稱（因為不能跨域）

Jquery取得iframe中元素的幾種方法

jquery方法:
在父視窗中操作選中IFRAME中的所有輸入框： $(window.frames["iframeSon"].document).find(":text");
在IFRAME中操作選中父視窗中的所有輸入框：$(window.parent.document).find(":text");
iframe架構的HTML：<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

1.在父視窗中操作選中IFRAME中的所有單選鈕
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作選中父視窗中的所有單選鈕
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe架構的：
<iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
     <MCE:SCRIPT mce_src="js/jquery-1.2.6.js" src="../js/jquery-1.2.6.js" type="text/ecmascript"></MCE:SCRIPT>
     <MCE:SCRIPT type="text/javascript"><!--

         $(function(){
             $("#t1").hover(function(){alert('');});
             //$("iframe").contents().find("body").append("I'm in an iframe!");
             //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px");
             //$("#iframe1").contents().find("#d1").css('color','red');
             //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"});
             //$("#iframe1").src("test.html");
         });

// --></MCE:SCRIPT>
<DIV>
<INPUT id=t1>
<IFRAME id=iframe1 src="child.htm" mce_src="child.htm"></IFRAME>
<IFRAME height=100 src="child.htm" width=300 mce_src="child.htm"></IFRAME>
</DIV>
<DIV>
</DIV>

收集利用Jquery取得iframe中元素的幾種方法 :

$(document.getElementById('iframeId').contentWindow.document.body).htm()

顯示iframe中body元素的內容。

$("#testId", document.frames("iframename").document).html();

根據iframename取得其中ID為"testId"元素

$(window.frames["iframeName"].document).find("#testId").html()

作用同上

網上整理到的方法

內容裡有兩個ifame
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>
leftiframe中jQuery改變mainiframe的src代碼：
$("#mainframe",parent.document.body).attr("src","http://www.111cn.net ")
如果內容裡面有一個ID為mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一個someID
<div id="someID">you want to get this content</div>
得到someID的內容
$("#mainiframe").contents().find("someID").html() html 或者 $("#mainiframe").contains().find("someID").text()值
如上面所示
leftiframe中的jQuery操作mainiframe的內容someID的內容
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()

在父視窗中操作選中IFRAME中的所有單選鈕

$(window.frames["iframe1"].document).find("input[ at type='radio']").attr("checked","true");
在IFRAME中操作選中父視窗中的所有單選鈕
$(window.parent.document).find("input[ at type='radio']").attr("checked","true");
iframe架構的：<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
IE7中測試通過
在父頁面訪問Iframe子表單的txtAddress控制項
window.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ;

在Iframe子表單1訪問父頁面的TextBox1控制項 , 子表單1把值賦給子表單2的某個控制項
string strValue = "從子表單傳遞給父頁面的值" ;
下面是在Page_Load事件裡面調用的,當然可以寫在javascript指令碼裡面
this.Response.Write("<script>parent.document.all('TextBox1').value = '" + strValue + "';</script>");
this.Response.Write("<script>if( parent.document.all('TextBox2').value = '0')parent.document.all('TextBox1').value = '44';</script>");
子表單訪問父表單中的全域變數：
parent.xxx;
在Iframe子表單1訪問子表單2的txtAddress控制項子表單1把值賦給子表單2的某個控制項
window.parent.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ;
父表單提交兩個Iframe子表單
window.frames["ifrMapCompanyDetails"].Form1.submit();
window.frames["ifrMapProductInfoDetails"].Form1.submit();
Iframe子表單調用父頁面的javascript事件
window.parent.XXX()
//父頁面調用當前頁面中IFRAME子頁面中的指令碼childEvent
function invokechildEvent()
{ var frm = document.frames["ifrChild1"].childEvent(); }
或者調用當前頁面中第一個IFRAME中的指令碼childEvent
{ var frm = document.frames[0]; frm.childEvent(); }
//子頁面調用父表單的某個按鈕的按鈕事件
window.parent.Form1.btnParent.click()
父頁面調用子表單的某個按鈕的按鈕事件
window.frames['ifrChild1'].document.all.item("btnChild3").click();
//jquery 部分：
在父視窗中操作選中IFRAME中的所有單選鈕
$(window.frames["iframe1"].document).find("input[ at type='radio']").attr("checked","true");
在IFRAME中操作選中父視窗中的所有單選鈕
$(window.parent.document).find("input[ at type='radio']").attr("checked","true");

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery操作iframe中的元素和js函數

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support