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 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
简单实现js页面切换功能
Jan 10 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
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
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
vue slot与传参实例代码讲解
2019/04/28 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python自动化测试实例解析
2014/09/28 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
django ajax json的实例代码
2018/05/29 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
医院检讨书范文
2014/02/01 职场文书
3分钟演讲稿
2014/04/30 职场文书
副总经理任命书
2014/06/05 职场文书
督导岗位职责范本
2015/04/10 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
遗愿清单观后感
2015/06/09 职场文书
小学数学国培研修日志
2015/11/13 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis