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写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
Bootstrap基础学习
Jun 16 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
解决vue页面DOM操作不生效的问题
Mar 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
PHP中预定义的6种接口介绍
2015/05/12 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
关于js datetime的那点事
2011/11/15 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
python组合无重复三位数的实例
2018/11/13 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
教师自查自纠材料
2014/10/14 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
护士2015年终工作总结
2015/04/29 职场文书
同事打架检讨书
2015/05/06 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers