父元素与子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三元运算符的多种使用技巧
Apr 16 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
jquery实现拖动效果
Aug 10 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
canvas实现贪食蛇的实践
Feb 15 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
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
华为慧通笔试题
2016/04/22 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
代理协议书
2014/04/22 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
车间安全生产标语
2014/06/06 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
中学教代会开幕词
2016/03/04 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
element多个表单校验的实现
2021/05/27 Javascript
nginx配置限速限流基于内置模块
2022/05/02 Servers