jQuery控制iFrame(实例代码)


Posted in Javascript onNovember 19, 2013

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

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find(”input[@type='radio']“).attr(”checked”,”true”);

2.在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>

IE7中测试通过

代码:

<!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> 
    <title>jQuery控制iframe</title> 
    <script type="text/ecmascript" src="../js/jquery-1.2.6.js"></script> 
    <script type="text/javascript"> 
        $(function(){ 
            $("#t1").hover(function(){alert('');}); 
            //$("iframe").contents().find("body").append("I'm in an iframe!"); 
            //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px"); 
            //$("#iframe1").contents().find("#d1").css('color','red'); 
            //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"}); 
            //$("#iframe1").src("test.html"); 
        }); 
    </script> 
</head> 
<body> 
<div> 
<input type="text" id="t1" /> 
<iframe id="iframe1" src="child.htm"></iframe> 
<iframe src="child.htm" width="300" height="100"></iframe> 
</div> 
<div> 
</div> 
</body> 
</html>

使用jquery操作iframe

1、内容里有两个ifame

<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>

leftiframe中jQuery改变mainiframe的src代码:
$("#mainframe",parent.document.body).attr("src","https://3water.com")

2、如果内容里面有一个ID为mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>
得到someID的内容

$("#mainiframe").contents().find("someID").html() html 或者 $("#mainiframe").contains().find("someID").text()值

3、在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

那选择id自然就是依然使用find方法
$(window.frames["iframe1"].document).find("#id")

Javascript 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 #Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 #Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 #Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 #Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 #Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 #Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 #Javascript
You might like
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
VuePress 快速踩坑小结
2019/02/14 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python异常处理知识点总结
2019/02/18 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python文件读写代码实例
2019/10/21 Python
浅谈Python中的模块
2020/06/10 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
暑期实习鉴定
2013/12/16 职场文书
班组长岗位职责范本
2014/01/05 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
2014年防汛工作总结
2014/12/08 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL