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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
Vue表单实例代码
Sep 05 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
Ajax常用封装库——Axios的使用
May 08 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魔术方法的使用示例
2015/06/23 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
document.documentElement的一些使用技巧
2013/04/18 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python常用模块介绍
2014/11/21 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
护士演讲稿优秀范文
2014/04/30 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
教育合作协议范本
2014/10/17 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
拖欠货款起诉状
2015/05/20 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android