iframe的父子窗口之间的对象相互调用基本用法
更新时间：2013年09月03日 15:27:37 作者：
iframe在使用时可能会涉及到父子窗口之间传值和方法的相互调用，研究了一下其实非常简单，就那么几个用法而已，在此与大家分享下，感兴趣的朋友可以参考下
使用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');
子窗口中调用父窗口的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');
相关文章
感谢网友“liufabin”提出的关于不支持FF的问题，第一个在FF下经过测试时支持的，第二个中的高度自适应不支持，我在网上找了一个JQUERY的插件2009-05-05
这篇文章主要介绍了JavaScript程序设计高级算法之动态规划,结合实例形式分析了javascript动态规划算法的原理、实现技巧与相关使用注意事项,需要的朋友可以参考下2017-11-11
使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)
每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下2023-02-02
这篇文章主要为大家介绍了前端手写功能进阶的相关技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了小程序实现选择题选择效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
window.event快达到全浏览器支持了，以后使用就方便了
在Tangram群里讨论到<a href="#" onclick="baidu.event.preventDefault(event);">的写法时，以为标准浏览器只能用arguments[0]来获取到event，结果nodiseal同学说已经可以这么用了，于是做了以下测试2011-11-11
Web系统中，从一个网页跳转到另一个网页，是LAMP项目中最常用的技术之一。页面跳转可能是由于用户单击链接、按钮等引发的，也可能是系统自动产生的。 此处介绍PHP中常用的实现页面自动跳转的方法。2015-04-04
这篇文章主要介绍了基于JavaScript实现下拉列表左右移动效果,代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了javascript搜索框效果实现方法,可实现显示默认提示文字的搜索框效果,非常简单实用,需要的朋友可以参考下2015-05-05
我遇到的参数传递中 双引号单引号嵌套问题2010-02-02
最新评论