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 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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 和 COM
2006/10/09 PHP
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
python遍历文件夹下所有excel文件
2018/01/03 Python
python仿抖音表白神器
2019/04/08 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
Django自带的用户验证系统实现
2020/12/18 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
运动会邀请函范文
2014/02/06 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2014年班务工作总结
2014/12/02 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记