jQuery取得iframe中元素的常用方法详解

更新时间：2026-03-29 03:38:55作者：fang

本文实例分析了jQuery取得iframe中元素的常用方法。分享给大家供大家参考，具体如下：

jquery取得iframe中元素的几种方法：

在iframe子页面获取父页面元素

代码如下:

$('#objId', parent.document);

搞定...

在父页面获取iframe子页面的元素：

$("#objid",document.frames('iframename').document)

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

显示iframe中body元素的内容。

代码如下:

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

根据iframename取得其中ID为"testId"元素

代码如下:

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

用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">

<head>

</head>

<body>

</body>

</html>

iframe.html 内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>iframe.html</title>

</head>

<body>

</body>

</html>

1. 在index.html执行JS直接访问:

代码如下:

document.getElementById('koyoz').contentWindow.document.getElementById('test').style.color='red'

通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .

2. 在index.html里面借助jQuery访问:

代码如下:

$("#koyoz").contents().find("#test").css('color','red');

此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

收集网上的一些示例：

用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了

1. 在父窗口中操作选中IFRAME中的所有单选钮

代码如下:

$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");

2. 在IFRAME中操作选中父窗口中的所有单选钮

代码如下:

$(window.parent.document).find("input:radio").attr("checked","true");

父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：

代码如下:

$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

希望本文所述对大家jQuery程序设计有所帮助。

手游推荐

王道三国策略游戏380.18 MBv0.0.12026-03-28
下载
刮个爽手机版休闲益智186.96 MBv1.0.282026-03-28
下载
龙符天祭策略游戏756.03 Mv22026-03-28
下载
入魂一番赏app网上购物106.66 Mv4.3.52026-03-28
下载
童话师经营养成504.02 Mv1.1.52026-03-28
下载
Bebo Cam app图像拍照264.51 Mv2.3.02026-03-28
下载
纯三国官方正版策略游戏167.24 Mv0.0.12026-03-28
下载
Poka Cam app图像拍照74.7 Mv1.8.02026-03-28
下载
COLMO app趣味娱乐199.15 Mv2.3.5.22026-03-28
下载
愤怒的小鸟变形金刚苹果版休闲游戏439.4 Mv2.39.02026-03-28
下载
这也能切苹果版休闲游戏479.6 Mv21342026-03-28
下载
口袋吉伊卡哇苹果手机版模拟游戏920.4 Mv2.0.02026-03-28
下载