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 相关文章推荐
php与js的区别是什么
Aug 05 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
面包屑导航详解
Dec 07 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 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
PHP编程网上资源导航
2006/10/09 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JS表的模拟方法
2015/02/05 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
Vue.js用法详解
2017/11/13 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
平面设计岗位职责
2013/12/14 职场文书
校园达人秀策划书
2014/01/12 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
2015年新农合工作总结
2015/03/30 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
nginx 配置指令之location使用详解
2022/05/25 Servers
Redis入门基础常用操作命令整理
2022/06/01 Redis