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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
js Proxy的原理详解
May 25 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
前端必学之PHP语法基础
2016/01/01 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python图像常规操作
2017/11/11 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python pandas库中的isnull()详解
2019/12/26 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python对一个数向上取整的实例方法
2020/06/18 Python
服务型党组织建设典型材料
2014/05/07 职场文书
环保倡议书50字
2014/05/15 职场文书
法院授权委托书格式
2014/09/28 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2015元旦节寄语
2014/12/08 职场文书
思想工作总结范文
2015/08/12 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python