iframe子父页面调用js函数示例
更新时间：2013年11月07日 17:35:39 作者：
iframe子页面调用父页面js函数及iframe父页面调用子页面js函数在实际项目中都是很实用的，下面有个不错的示例，感兴趣的朋友可以了解下
1、iframe子页面调用父页面js函数
子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数，就写成：
window.parent.a();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：
window.parent.document.getElementById("test").value;
jQuery方法为：
$(window.parent.document).contents().find("test").val();
但是我在chrome浏览器下却发现此方法无效了！查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。
2、iframe父页面调用子页面js函数
这个就稍微复杂一些，下面的方法支持ie和firefox浏览器：
document.getElementById('ifrtest').contentWindow.b();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：
document.getElementById("test").value;
注：ifrtest是iframe框架的id，b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。
子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数，就写成：
复制代码 代码如下:
window.parent.a();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：
复制代码 代码如下:
window.parent.document.getElementById("test").value;
jQuery方法为：
$(window.parent.document).contents().find("test").val();
但是我在chrome浏览器下却发现此方法无效了！查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的。此方法支持ie、firefox浏览器。
2、iframe父页面调用子页面js函数
复制代码 代码如下:
这个就稍微复杂一些，下面的方法支持ie和firefox浏览器：
document.getElementById('ifrtest').contentWindow.b();
子页面取父页面中的标签中的值，比如该标签的id为“test”,则：
document.getElementById("test").value;
注：ifrtest是iframe框架的id，b()为子页面js函数。contentWindow属性是指定的frame或者iframe所在的window对象，IE下可以省略。
相关文章
为了实现这样的数据显示出来三个序列，分别为郑州、新乡、安阳的电量，就需要自己实现对这样数据的转换，转换成如下的形式：2013-08-08
20分钟打造属于你的Bootstrap站点，学会使用twitter bootstrap建立一个站点，从而巩固Bootstrap一系列基础知识，感兴趣的小伙伴们可以参考一下2016-07-07
前面提到了NodeJS的命令行和Web版之“Hello，World”。命令行是直接执行hello.js文件，Web版的需要require http模块。http模块是NodeJS自身提供的2012-03-03
这篇文章主要介绍了js设置鼠标悬停改变背景色实现详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要给大家介绍了关于利用JavaScript实现的九种排序算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了微信小程序实现点击出现弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
js 判断一个元素是否存在此功能在项目中很实用，本人搜集整理了一些常用技巧，需要了解的朋友可以参考下2012-12-12
这篇文章主要介绍了使用javascript实现博客园页面右下角返回顶部按钮的思路及源码，非常不错，这里推荐给小伙伴们2015-02-02
Redux官网上是这样描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript状态容器，提供可预测性的状态管理）。目前Redux GitHub有5w多star，足以说明 Redux 受欢迎的程度2021-06-06
最新评论