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


Posted in Javascript onJanuary 14, 2016

本文实例分析了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">
<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">3water.com</div>
</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程序设计有所帮助。

Javascript 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Electron 如何调用本地模块的方法
Feb 01 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 #Javascript
分享网页检测摇一摇实例代码
Jan 14 #Javascript
jquery淡入淡出效果简单实例
Jan 14 #Javascript
jQuery实现的左右移动焦点图效果
Jan 14 #Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 #Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 #Javascript
jQuery遮罩层效果实例分析
Jan 14 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php中的实现trim函数代码
2007/03/19 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
优秀教导主任事迹材料
2014/05/09 职场文书
房产分割协议书范文
2014/11/21 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers