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 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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
PL-880隐藏功能
2021/03/01 无线电
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js中function()使用方法
2013/12/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python如何给你的程序做性能测试
2020/07/29 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
员工自我鉴定
2013/10/09 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
《钱学森》听课反思
2014/03/01 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
小学五年级学生评语
2014/04/22 职场文书
建设工地安全标语
2014/06/07 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Redis性能监控的实现
2021/07/09 Redis