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 keyUp和keyDown的区别
Dec 12 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
将PHP作为Shell脚本语言使用
2006/10/09 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
python进程与线程小结实例分析
2018/11/11 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
python中Genarator函数用法分析
2015/04/08 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Django继承自带user表并重写的例子
2019/11/18 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
某公司部分笔试题
2013/11/05 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
工程业务员岗位职责
2013/12/31 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
python中数组和列表的简单实例
2022/03/25 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers