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 打造动态下滑菜单实现说明
Apr 15 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js 操作符汇总
Nov 08 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
Highcharts入门之简介
Aug 02 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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使用for语句输出三角形的方法
2015/06/09 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
JScript的条件编译
2007/05/29 Javascript
用cssText批量修改样式
2009/08/29 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python对矩阵进行转置的2种处理方法
2019/07/17 Python
django和vue实现数据交互的方法
2019/08/21 Python
pandas数据处理进阶详解
2019/10/11 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python字符串的index和find的区别详解
2020/06/20 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
SQL面试题
2013/12/09 面试题
八一建军节活动方案
2014/02/10 职场文书
国培计划培训感言
2014/03/11 职场文书
网络管理专业求职信
2014/03/15 职场文书
推广普通话演讲稿
2014/05/23 职场文书
2015新学期开学寄语
2015/02/26 职场文书
通知书大全
2015/04/27 职场文书
孔子观后感
2015/06/08 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书