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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
layui table去掉右侧滑动条的实现方法
Sep 05 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jQuery中on()方法用法实例详解
2015/02/06 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
linux安装python修改默认python版本方法
2019/03/31 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
老干部工作先进事迹
2014/08/17 职场文书
师德师风的心得体会
2014/09/02 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers