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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
webpack入门+react环境配置
Feb 08 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue遍历对象中的数组取值示例
Nov 07 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的FTP学习(一)
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
python杀死一个线程的方法
2015/09/06 Python
python实现决策树
2017/12/21 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
出国留学介绍信
2014/01/13 职场文书
社区食品安全实施方案
2014/03/28 职场文书
车辆工程专业求职信
2014/04/28 职场文书
社区服务活动总结
2014/05/07 职场文书
六五普法宣传标语
2014/10/06 职场文书