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 相关文章推荐
JS随机漂浮广告代码具体实例
Nov 19 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
vue项目实现多语言切换的思路
Sep 17 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
动态加载iframe
2006/06/16 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
js使用highlight.js高亮你的代码
2017/08/18 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python 调用HBase的简单实例
2016/12/18 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python元组知识点总结
2019/02/18 Python
python打包成so文件过程解析
2019/09/28 Python
Python any()函数的使用方法
2019/10/28 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
电子商务专业学生的自我鉴定
2013/11/28 职场文书
原材料检验岗位职责
2014/03/15 职场文书
三下乡个人总结
2015/03/04 职场文书
党员违纪检讨书
2015/05/05 职场文书
出生证明范本
2015/06/15 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL