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检查浏览器是否支持flash的实现代码
Aug 14 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
织梦模板标记简介
2007/03/11 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
PHP中如何使用Cookie
2015/10/28 面试题
亲子读书活动方案
2014/02/22 职场文书
社区党务公开实施方案
2014/03/18 职场文书
留学经费担保书
2014/05/12 职场文书
消防工作实施方案
2014/06/09 职场文书
生死抉择观后感
2015/06/09 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技