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 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 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
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php jsonp单引号转义
2014/11/23 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python字典简介以及用法详解
2016/11/15 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
解决Python中回文数和质数的问题
2019/11/24 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
软件测试面试题
2014/01/05 面试题
大学军训感言600字
2014/02/25 职场文书
体育教师求职信
2014/05/24 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js