1. 程式人生 > >【HTML/JS,JQuery】JQuery操作iframe父頁面與子頁面的元素與方法

【HTML/JS,JQuery】JQuery操作iframe父頁面與子頁面的元素與方法

http://www.cnblogs.com/imteach/p/3798375.html

JQUERY IFRAME

下面簡單使用Jquery來操作iframe的一些記錄,這個使用純JS也可以實現。

第一、在iframe中查詢父頁面元素的方法: $('#id', window.parent.document)

第二、在父頁面中獲取iframe中的元素方法: $(this).contents().find("#suggestBox")

第三、在iframe中呼叫父頁面中定義的方法和變數: parent.method parent.value

iframe裡用jquery獲取父頁面body iframe.html
複製程式碼
 1 <html>
 2 <script src='jquerymin.js'></script>
 3 <body id='1'>
 4     <div>it is a iframe</div>
 5 </body>    
 6 <script>
 7     $(document).ready(
 8         function(){
 9         var c = $(window.parent.document.body) 
10 
11     //麻煩的方法: var c = $($(window).eq(0)[0].parent.document).find('body'); ,忘了可以用前面的方法了
12         alert(c.html());
13         }
14     );
15 </script>
16 </html>
複製程式碼
content.html
複製程式碼
<html>
    <script src='jquerymin.js'></script>
<body id='fa'>
    <iframe src='iframe.html' width='100' height='100'></iframe>
        <br>
        <br>
        <br>
     <div id='mydiv'>content iframe</div>
</body>    
<
script> function a() { alert(1); } alert($(document).text()); </script> </html>
複製程式碼

jquery、js呼叫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內呼叫父類函式:

window.parent.func();