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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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编实现程动态图像的创建代码
2008/09/28 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
浅谈javascript的调试
2015/01/28 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python实现数值积分方式
2019/11/20 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
Ajax和javascript的区别
2013/07/20 面试题
满月酒答谢词
2014/01/14 职场文书
代理协议书
2014/04/22 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
财产保全担保书
2015/01/20 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书