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中常用的SET和GET
Jan 13 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
angularjs $http实现form表单提交示例
Jun 09 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
js实现简易ATM功能
Oct 27 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
微信跳一跳自动运行python脚本
2018/01/08 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
暑假实习求职信范文
2013/09/22 职场文书
图书室管理制度
2014/01/19 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
客服部工作职责范本
2014/02/14 职场文书
护士感人事迹
2014/05/01 职场文书
家长建议怎么写
2014/05/15 职场文书
应聘教师自荐书
2014/06/16 职场文书
大一新生检讨书
2014/10/29 职场文书
单身申明具结书
2015/02/26 职场文书
Python基础知识之变量的详解
2021/04/14 Python