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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
javascript函数式编程基础
Sep 15 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
js如何实现设计模式中的模板方法
2013/07/23 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
js module大战
2019/04/19 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
vue实现购物车的监听
2020/04/20 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python实现最速下降法
2020/03/24 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
通俗讲解python 装饰器
2020/09/07 Python
如何编写python的daemon程序
2021/01/07 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
出国留学自荐信
2013/10/25 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
小浪底导游词
2015/02/12 职场文书
英语辞职信怎么写
2015/02/28 职场文书
上班旷工检讨书
2015/08/15 职场文书
车位出租协议书范本
2016/03/19 职场文书
AJAX学习笔记
2021/05/18 Javascript
Python内置数据结构列表与元组示例详解
2021/08/04 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
如何利用python实现Simhash算法
2022/06/28 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技