父元素与子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 相关文章推荐
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
搞定immutable.js详细说明
May 02 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 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生成sitemap.xml地图函数
2013/11/13 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php常用字符函数实例小结
2016/12/29 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
详解如何较好的使用js
2016/12/16 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Python中psutil的介绍与用法
2019/05/02 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Java如何格式化日期
2012/08/07 面试题
元宵节主持词
2014/03/25 职场文书
养成教育经验材料
2014/05/26 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2014年小学工作总结
2014/11/26 职场文书
开学第一周总结
2015/07/16 职场文书
生日祝酒词大全
2015/08/10 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Python自动化实战之接口请求的实现
2022/05/30 Python