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 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP学习之数组值的操作
2011/04/17 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python中turtle作图示例
2017/11/15 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
幼儿园教育教学反思
2014/01/31 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年项目工作总结
2015/04/29 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers