父元素与子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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue实现的双向数据绑定操作示例
Dec 04 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Vant picker 多级联动操作
Nov 02 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缓存技术介绍
2006/11/25 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php实现微信支付之企业付款
2018/05/30 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python实现针对中文排序的方法
2017/05/09 Python
详解Python文本操作相关模块
2017/06/22 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
jupyter notebook实现显示行号
2020/04/13 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
生日寿宴答谢词
2014/01/19 职场文书
大家检讨书5000字
2014/02/03 职场文书
学员自我鉴定
2014/03/19 职场文书
中药学专业求职信
2014/05/31 职场文书
工业设计专业自荐书
2014/06/05 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL