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复选框checkbox实现删除前判断
Apr 20 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
JS中的作用域链
Mar 01 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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
mysql limit查询优化分析
2008/11/12 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
很可爱的输入框
2008/08/03 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
JS原生数据双向绑定实现代码
2017/08/14 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
python复制文件的方法实例详解
2015/05/22 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python科学计算之narray对象用法
2019/11/25 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
求职自荐信格式
2013/12/04 职场文书
加油口号大全
2014/06/13 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
上班迟到检讨书
2014/09/15 职场文书
运动会主持人开幕词
2016/03/04 职场文书