iframe子父页面调用js函数示例


Posted in Javascript onNovember 07, 2013

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下可以省略。
Javascript 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Bootstrap插件全集
Jul 18 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 #Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 #Javascript
js操作label给label赋值及取label的值示例
Nov 07 #Javascript
js实现幻灯片播放图片示例代码
Nov 07 #Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 #Javascript
得到form下的所有的input的js代码
Nov 07 #Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 #Javascript
You might like
文件上传类
2006/10/09 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php构造函数实例讲解
2013/11/13 PHP
js身份证验证超强脚本
2008/10/26 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
express express-session的使用小结
2018/12/12 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
node 版本切换的实现
2020/02/02 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
python3 shelve模块的详解
2017/07/08 Python
详解python eval函数的妙用
2017/11/16 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
升职感谢信
2015/01/22 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技