父元素与子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系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
八年级数学教学反思
2014/01/31 职场文书
大学生社会实践方案
2014/05/11 职场文书
美术专业自荐信
2014/07/07 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
终止劳动合同协议书
2014/10/05 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
二手房购房意向书
2015/05/09 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android