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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP注释实例技巧
2008/10/03 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python读取xlsx的方法
2018/12/25 Python
Python----数据预处理代码实例
2019/03/20 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Python3 集合set入门基础
2020/02/10 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
新学期决心书
2014/03/11 职场文书
党员干部承诺书范文
2014/03/25 职场文书
教师师德承诺书
2014/03/26 职场文书
股东授权委托书范文
2014/09/13 职场文书
毕业设计致谢语
2015/05/14 职场文书