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 相关文章推荐
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
基于jquery编写分页插件
Mar 07 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
关于AngularJS中几种Providers的区别总结
May 17 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python中return不返回值的问题解析
2020/07/22 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
计算机网络专业个人的自我评价
2013/10/17 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
市场部经理岗位职责
2014/04/10 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
教师工作决心书
2015/02/04 职场文书
廉政党课工作报告案例
2019/06/21 职场文书