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 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
iview中Select 选择器多选校验方法
Mar 15 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
PHP实现文件安全下载
2006/10/09 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
js解决movebox移动问题
2016/03/29 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python进行文件对比的方法
2018/12/24 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
员工年终演讲稿
2014/01/03 职场文书
办理居住证介绍信
2014/01/15 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
英语教育专业自荐信
2014/05/29 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
户外亲子活动总结
2015/05/08 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
选购到合适的激光打印机
2022/04/21 数码科技