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 相关文章推荐
再探JavaScript作用域
Sep 24 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
React 高阶组件HOC用法归纳
Jun 13 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
推荐文章系统(一)
2006/10/09 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python+mysql实现简单的web程序
2014/09/11 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
区域总监的岗位职责
2013/11/21 职场文书
主要负责人任命书
2014/06/06 职场文书
献爱心标语
2014/06/21 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers