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 相关文章推荐
Maps Javascript
Jan 22 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
深入理解python try异常处理机制
2016/06/01 Python
基于pip install django失败时的解决方法
2018/06/12 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
美国探亲签证邀请信
2014/02/05 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
环保倡议书100字
2014/05/15 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
实验室安全管理制度
2015/08/05 职场文书