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
别了 JavaScript中的isXX系列
Aug 01 Javascript
jquery常用操作小结
Jul 21 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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简单的留言板与回复功能具体实现
2014/02/19 PHP
10条php编程小技巧
2015/07/07 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
大家访活动实施方案
2014/03/10 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
先进单位事迹材料
2014/12/25 职场文书
导游词之太湖
2019/10/08 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Elasticsearch 基本查询和组合查询
2022/04/19 Python