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学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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三层结构(上) 简单三层结构
2010/07/04 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
php命令行模式代码实例详解
2021/02/26 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
express 项目分层实践详解
2018/12/10 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python发送告警邮件脚本
2018/09/17 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
2014年3.15团委活动总结
2014/03/16 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
追悼会答谢词
2015/01/05 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers