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 相关文章推荐
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js创建对象的方法汇总
Jan 07 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
vuejs实现下拉框菜单选择
Oct 23 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 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python字符类型的一些方法小结
2016/05/16 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python实现最速下降法
2020/03/24 Python
python 制作本地应用搜索工具
2021/02/27 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
struct与class的区别
2014/02/03 面试题
员工入职担保书范文
2014/04/01 职场文书
村庄环境整治方案
2014/05/15 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
学校党支部承诺书
2015/04/30 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
python在package下继续嵌套一个package
2022/04/14 Python