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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
JS实现百度搜索框
Feb 25 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伪静态的实现详细介绍
2013/04/28 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
田径运动会通讯稿
2014/09/13 职场文书
班级班风口号大全
2015/12/25 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python