js实现iframe跨页面调用函数的方法


Posted in Javascript onDecember 13, 2014

本文实例讲述了js实现iframe跨页面调用函数的方法。分享给大家供大家参考。具体实现方法如下:

在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数。比如说:现在有两个页面parent.html和child.html。其中parent.html中含有IFrame并且IFrame指向child.html。现在需要在parent.html/child.html中调用child.html/parent.html的一个js方法。   

具体的代码实现如下:

parent.html父页面:

<html> 

<head> 

<script type="text/javascript"> 
function parent_click(){ 


alert("来自父页面"); 

} 

</script> 

</head> 

<body> 

<input type="button" value="调用本页面函数" onclick="parent_click();" /> 

<input type="button" value="调用子页面函数" onclick='window.frames["childPage"].child_click();' /> 

<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 

</body> 

</html>

child.html子页面:

<html> 

<head> 

<script type="text/javascript"> 
function child_click(){ 


alert("调用的子页面函数"); 

} 

</script> 

</head> 

<body> 

<input type="button" value="调用父页面函数" onclick='parent.window.parent_click();' /> 

<input type="button" value="调用本页面函数" onclick="child_click();" /> 

</body> 

</html>

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
javascript里使用php代码实例
Dec 13 #Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 #Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 #Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 #Javascript
js QQ客服悬浮效果实现代码
Dec 12 #Javascript
js 左右悬浮对联广告特效代码
Dec 12 #Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python实现的系统实用log类实例
2015/06/30 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
提升python处理速度原理及方法实例
2019/12/25 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
推广普通话标语
2014/06/27 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
个人年度总结报告
2015/03/09 职场文书
公司催款律师函
2015/05/27 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
mysql数据库隔离级别详解
2022/06/16 MySQL