父元素与子iframe相互获取变量和元素对象的具体实现


Posted in Javascript onOctober 15, 2013

父中:

<input id="username"type="text" /> 
<scripttype="text/javascript"> 
var count = 1; 
</script>

-------------------------------------------------------------
子iframe中:
<scripttype="text/javascript"> 
alert(window.parent.count); //获取父中的js变量 
alert($("#username", window.parent.document));//获取父中jQuery对象 
alert(window.parent.document.getElementByIdx_x('username'));//获取父中DOM对象 
</script>

--------------------------------------------------------------------------------------------------

子iframe中(id="iframeId"name="iframeName"):

<input id="username"type="text" /> 
<scripttype="text/javascript"> 
varcount = 1; 
</script>

-------------------------------------------------------------
父中:
<scripttype="text/javascript"> 
alert(document.iframeName.count);//获取子iframe中的js变量 
alert($(window.frames["iframeName"].document).contents().find("#username"));//获取子iframe中jQuery对象 
alert($("#username",document.frames("iframeName").document));//获取子iframe中jQuery对象 
alert(window.document.getElementById('iframeId').contentWindow.document.getElementByIdx_x('username'));//获取子iframe中DOM对象 
</script>

收集网上的一些示例:
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1. 在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
2. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");
父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了,如:
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");
3.在子窗口中调用父窗口中的另一个子窗口的方法(FRAME):
parent.frames["Main"].Fun();
注意:建议使用[],这样比较兼容多个浏览器,()火狐/搜狗/谷歌不兼容。

Javascript 相关文章推荐
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 #Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 #Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 #Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 #Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 #Javascript
JS操作Cookies的小例子
Oct 15 #Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 #Javascript
You might like
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
javascript 闭包疑问
2010/12/30 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python os模块介绍
2014/11/30 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
一名女生的自荐信
2013/12/08 职场文书
中专生自我鉴定
2013/12/17 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
团日活动总结模板
2014/06/25 职场文书
城管年度个人总结
2015/02/28 职场文书
大学生入党群众意见书
2015/06/02 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL