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 模式设计之工厂模式学习心得
Apr 27 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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
PHP的FTP学习(一)
2006/10/09 PHP
php防攻击代码升级版
2010/12/29 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
python函数的5种参数详解
2017/02/24 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Python实现数字的格式化输出
2020/08/01 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
大堂副理的岗位职责范文
2014/02/17 职场文书
运动会稿件100字
2014/02/21 职场文书
干部下基层实施方案
2014/03/14 职场文书
主持词开场白
2014/03/17 职场文书
大学生实习证明范本
2014/09/19 职场文书
一般纳税人申请报告
2015/05/18 职场文书
个人业务学习心得体会
2016/01/25 职场文书