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 解析xml文件
Aug 09 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
javascript数组排序汇总
Jul 07 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
微信小程序自动客服功能
Nov 02 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 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编码解码函数代码
2009/03/10 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Python入门篇之列表和元组
2014/10/17 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python实现的质因式分解算法示例
2018/05/03 Python
在python shell中运行python文件的实现
2019/12/21 Python
Python 代码调试技巧示例代码
2020/08/11 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
艺术设计专业求职自荐信
2014/05/19 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
秦兵马俑导游词
2015/02/02 职场文书
实习报告范文
2019/07/30 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android