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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
javascript关于继承解析
May 10 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
vue3获取当前路由地址
Feb 18 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实现的树形结构数据存取类实例
2014/11/29 PHP
PDO::setAttribute讲解
2019/01/29 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python服务器与android客户端socket通信实例
2014/11/12 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中的默认参数详解
2015/06/24 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
银行求职自荐信
2014/06/30 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
小马王观后感
2015/06/11 职场文书
公司岗位说明书
2015/10/08 职场文书
导游词幽默开场白
2019/06/26 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
日元符号 ¥
2022/02/17 杂记