父元素与子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 demo 基本技巧
Dec 18 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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
dedecms模版制作使用方法
2007/04/03 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript Excel操作知识点
2009/04/24 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Pandas的数据过滤实现
2021/01/15 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
优秀交警事迹材料
2014/01/26 职场文书
股份合作协议书范本
2014/04/14 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
考试作弊检讨书
2015/01/27 职场文书
食品卫生管理制度
2015/08/06 职场文书
中学语文教学反思
2016/02/16 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
前端JavaScript大管家 package.json
2021/11/02 Javascript