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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
Vue列表渲染的示例代码
Nov 01 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脚本的10个技巧(7)
2006/10/09 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
解析yii数据库的增删查改
2013/06/20 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
js option删除代码集合
2008/11/12 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js中this用法实例详解
2015/05/05 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
公司离职证明范本
2014/01/13 职场文书
工作失职检讨书范文
2014/01/16 职场文书
健康家庭事迹材料
2014/05/02 职场文书
重点工程汇报材料
2014/08/27 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
SQL基础的查询语句
2021/11/11 MySQL
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记