父元素与子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 17 Javascript
js打开新窗口方法整理
Feb 17 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 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
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
详解vue渲染函数render的使用
2017/12/12 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
自考自我鉴定范文
2013/10/30 职场文书
优秀演讲稿范文
2013/12/29 职场文书
法学个人求职信范文
2014/01/27 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
总经理助理的职责
2014/03/14 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
目标责任书格式
2014/07/28 职场文书
家长会后的感想
2015/08/11 职场文书
vue动态绑定style样式
2022/04/20 Vue.js