父元素与子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 相关文章推荐
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue实现前端分页完整代码
Jun 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php设计模式 Strategy(策略模式)
2011/06/26 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python验证码识别处理实例
2015/12/28 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
医务人员医德考评自我评价
2015/03/03 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
话题作文之关于呼唤
2019/11/29 职场文书