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 Date对象使用总结
May 14 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
浅谈开发eslint规则
Oct 01 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
vue实现购物车列表
Jun 30 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php之readdir函数用法实例
2014/11/13 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
详解Node项目部署到云服务器上
2017/07/12 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
Python程序中设置HTTP代理
2016/11/06 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python循环实现n的全排列功能
2019/09/16 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
职工趣味运动会方案
2014/02/10 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Python中的tkinter库简单案例详解
2022/01/22 Python