iframe的父子窗口之间的对象相互调用基本用法


Posted in Javascript onSeptember 03, 2013

使用iframe的时候,可能会涉及到父子窗口之间传值和方法的相互调用,之前一直有些迷糊,也没有着意去弄清楚,这两天要干活,没法子了只好把这都弄明白了。其实非常简单,就那么几个用法,几句代码而已。

子窗口中调用父窗口的js方法:

parent.changeBtnTitle('tzgg');

一个父窗口中可能会有若干个功能行为类似的子窗口,子窗口中的组件要调用相同或者类似的对象或者方法,那么就把这样的方法写在父窗口中,通过传递参数来达到不同的效果。

父窗口获得子窗口中的某个对象:

首先要获得子窗口的iframe对象,比如:

var frameName = window.frames["frameId"]

然后要获得该子窗口的document值,然后就可以调用子窗口中的对象了。在父窗口中使用时为避免反复书写,不妨写成一个方法:
getSubWindowObj = function(moduleName){ 
return window.frames["iframe"+moduleName].document.getElementById("moreorless"+moduleName); 
}

这里只用了一个参数,只因为我的iframeId和子窗口的对象Id名字起的有规律,只需传入一个参数拼接之后就可以饿了。

同样,子页面调用父页面的元素,可以使用如下代码:

parent.window.document.getElementById('parentMenu'); 
//简写 
parent.document.getElementById('parentMenu');
Javascript 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 #Javascript
使用js操作cookie的一点小收获分享
Sep 03 #Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 #Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 #Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 #Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 #Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 #Javascript
You might like
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
纯JS实现轮播图
2017/02/22 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python三级菜单的实例
2017/09/13 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python装饰器用法示例小结
2018/02/11 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
运动会广播稿400字
2014/01/25 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
信访工作经验交流材料
2014/05/23 职场文书
贫困证明怎么写
2015/06/16 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书