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 相关文章推荐
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
js分页代码分享
Apr 28 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
JavaScript如何实现图片处理与合成
May 29 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中,文件上传
2006/12/06 PHP
php基础知识:函数基础知识
2006/12/13 PHP
php文件操作实例代码
2012/05/10 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php计算title标题相似比的方法
2015/07/29 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
vue 中的动态传参和query传参操作
2020/11/09 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
利用Python循环(包括while&for)各种打印九九乘法表的实例
2017/11/06 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python颜色随机生成器的实例代码
2020/01/10 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python