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 Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
JavaScript隐式类型转换代码实例
May 29 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伪静态之APACHE篇
2014/06/02 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
js身份证验证超强脚本
2008/10/26 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Python列表操作方法详解
2020/02/09 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
公务员的自我鉴定
2013/10/26 职场文书
关于人生的感言
2014/01/17 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
班主任评语大全
2014/04/26 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
提档介绍信范文
2015/10/22 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
JS数组去重详情
2021/11/07 Javascript
关于 Python json中load和loads区别
2021/11/07 Python