文章出處
文章列表
今天沒事來總結一下iframe在jquery中怎么操作的，下面我來給各位介紹jquery 獲取iframe子/父頁面的元素及iframe在jquery高度自適應實現方法，各位朋友可參考。
jquery方法:
在iframe子頁面獲取父頁面元素
代碼如下:
1 $('#objId', parent.document);
在父頁面 獲取iframe子頁面的元素
代碼如下:
1 $("#objid",document.frames('iframename').document) 2 3 $(document.getElementById('iframeId').contentWindow.document.body).html()
顯示iframe中body元素的內容。
1 $("#testId", document.frames("iframename").document).html();
根據iframename取得其中ID為"testId"元素。
$(window.frames["iframeName"].document).find("#testId").html()
在父窗口中操作 選中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>
在父窗口中操作 選中IFRAME中的所有單選鈕。
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
在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>
假設有兩個頁面,在相同域下.
index.html 文件內含有一個iframe:
XML/HTML代碼
<!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>頁面首頁</title> </head> <body> <iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe> </body> </html>
iframe.html 內容:
XML/HTML代碼
<!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>iframe.html</title> </head> <body> <div id="test">www.</div> </body> </html>
iframe自適應高度：
$("#iPersonalInfo").load(function() {
$(this).height($(this).contents().height());
})
有一點需要注意的，我也在調試的時候才發現的，耽誤了不少時間。就是綁定事件必須在iframe加載完畢之前綁定，否則不會執行。
以下是jQuery,load事件的概述
在每一個匹配元素的load事件中綁定一個處理函數。
如果綁定給window對象，則會在所有內容加載后觸發，包括窗口，框架，對象和圖像。如果綁定在元素上，則當元素的內容加載完畢后觸發。
注意:只有當在這個元素完全加載完之前綁定load的處理函數,才會在他加載完后觸發。如果之后再綁定就永遠不會觸發了。所以不要在$(document).ready()里綁定load事件，因為jQuery會在所有DOM加載完成后再綁定load事件。
iframe代碼，注意要寫ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代碼１：
//注意：下面的代碼是放在test.html調用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); });
jquery代碼２：
//注意：下面的代碼是放在和iframe同一個頁面調用 $("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheight); });
文章列表
全站熱搜
留言列表
