父元素与子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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Node.js创建Web、TCP服务器
Dec 05 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
python操作xml文件详细介绍
2014/06/09 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
详解Python核心对象类型字符串
2018/02/11 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
小学生打架检讨书
2014/01/26 职场文书
大学生社团活动总结
2014/04/26 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python