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 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
深入理解js数组的sort排序
May 28 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
vue按需加载实例详解
Sep 06 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP会话控制实例分析
2016/12/24 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Django的session中对于用户验证的支持
2015/07/23 Python
Python随机读取文件实现实例
2017/05/25 Python
使用python实现tcp自动重连
2017/07/02 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
教师网络培训感言
2014/03/09 职场文书
情人节寄语大全
2014/04/11 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
pt-archiver 主键自增
2022/04/26 MySQL
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技