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($.load)事件的用法和分析
Apr 09 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
js自定义瀑布流布局插件
May 16 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php SQL之where语句生成器
2009/03/24 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python合并多个装饰器小技巧
2015/04/28 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
pycharm 安装JPype的教程
2019/08/08 Python
python中取绝对值简单方法总结
2020/07/24 Python
如何利用python发送邮件
2020/09/26 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
校园文明倡议书
2014/05/16 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python