jQuery取得iframe中元素的常用方法詳解
本文實例分析了jQuery取得iframe中元素的常用方法。分享給大家供大家參考,具體如下:
jquery取得iframe中元素的幾種方法:
在iframe子頁面獲取父頁面元素
代碼如下:
搞定...
在父頁面 獲取iframe子頁面的元素:
$("#objid",document.frames('iframename').document) $(document.getElementById('iframeId').contentWindow.document.body).html()
顯示iframe中body元素的內容。
根據(jù)iframename取得其中ID為"testId"元素
用JS或jQuery訪問頁面內的iframe,兼容IE/FF
注意:框架內的頁面是不能跨域的!
假設有兩個頁面,在相同域下.
index.html 文件內含有一個iframe:
<!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 內容:
<!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">chabaoo.cn</div> </body> </html>
1. 在index.html執(zhí)行JS直接訪問:
通過在index.html訪問ID名為'koyoz'的iframe頁面,并取得此iframe頁面內的ID為'test'的對象,并將其顏色設置為紅色.
此代碼已經(jīng)測試通過,能支持IE/firefox .
2. 在index.html里面借助jQuery訪問:
此代碼的效果和JS直接訪問是一樣的,由于借助于jQuery框架,代碼就更短了.
收集網(wǎng)上的一些示例:
用jQuery在IFRAME里取得父窗口的某個元素的值只好用DOM方法與jquery方法結合的方式實現(xiàn)了
1. 在父窗口中操作 選中IFRAME中的所有單選鈕
2. 在IFRAME中操作 選中父窗口中的所有單選鈕
父窗口想獲得IFrame中的Iframe,就再加一個frames子級就行了,如:
希望本文所述對大家jQuery程序設計有所幫助。
- jquery、js調用iframe父窗口與子窗口元素的方法整理
- javascript原生和jquery庫實現(xiàn)iframe自適應高度和寬度
- js與jQuery 獲取父窗、子窗的iframe
- jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯誤
- jQuery實現(xiàn)跨域iframe接口方法調用
- 使用jQuery不判斷瀏覽器高度解決iframe自適應高度問題
- jquery操作 iframe的方法
- iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
- jquery得到iframe src屬性值的方法
- jQuery控制frames及frame頁面JS的方法
相關文章
jQuery插件passwordStrength密碼強度指標詳解
這篇文章主要為大家詳細介紹了jQuery插件passwordStrength密碼強度指標實現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-06-06jquery實現(xiàn)很酷的網(wǎng)頁頂部圖標下拉菜單效果
這篇文章主要介紹了jquery實現(xiàn)很酷的網(wǎng)頁頂部圖標下拉菜單效果,效果非常美觀大方,通過鼠標hover事件及頁面元素的遍歷與樣式操作實現(xiàn)該功能,需要的朋友可以參考下2015-08-08tuzhu_req.js 實現(xiàn)仿百度圖片首頁效果
這篇文章主要介紹了tuzhu_req.js 實現(xiàn)仿百度圖片首頁效果的相關資料,需要的朋友可以參考下2015-08-08jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案
這篇文章主要介紹了jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案,需要的朋友可以參考下2018-05-05