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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue elementUI批量上传文件
Apr 26 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
微信支付开发交易通知实例
2016/07/12 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
理解Javascript闭包
2013/11/01 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
实例浅析js的this
2016/12/11 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
艺术学院毕业生自荐信
2014/07/05 职场文书
文明好少年事迹材料
2014/08/19 职场文书
班子四风对照检查材料
2014/08/21 职场文书
十佳党员事迹材料
2014/08/28 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python