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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
常规表格多表头查询示例
Feb 21 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
javascript 常见功能汇总
Jun 11 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
javascript面向对象三大特征之封装实例详解
Jul 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
PHP连接access数据库
2008/03/27 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Keras搭建自编码器操作
2020/07/03 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
店长岗位职责
2013/11/21 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
毕业生见习报告总结
2014/11/08 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
SQL Server表分区删除详情
2021/10/16 SQL Server
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技