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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
转一个日期输入控件,支持FF
Apr 27 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP输出时间差函数代码
2013/01/28 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
售后服务承诺书范文
2014/03/26 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
个人整改方案范文
2014/10/25 职场文书
2015政治思想表现评语
2015/03/25 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
Java版 单机五子棋
2022/05/04 Java/Android