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 相关文章推荐
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jquery默认校验规则整理
Mar 24 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 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
Syphon 使用方法
2021/03/03 冲泡冲煮
如何使用PHP中的字符串函数
2006/11/24 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js面向对象编程总结
2017/02/16 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python读写docx文件的方法
2018/05/08 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
Linux常见面试题
2016/10/04 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
学雷锋月活动总结
2014/04/25 职场文书
英文演讲稿开场白
2014/08/25 职场文书
向女朋友道歉的话
2015/01/20 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
JS高级程序设计之class继承重点详解
2022/07/07 Javascript