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渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
jQuery实现增删改查
Dec 22 jQuery
vue实现倒计时功能
Mar 24 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现微信退款功能
2018/10/02 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
window.onload使用指南
2015/09/13 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
Python实现字典依据value排序
2016/02/24 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python进行参数传递的方法
2020/05/12 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
婚礼司仪主持词
2014/03/14 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
房产公证书格式
2015/01/26 职场文书
出国留学自荐信模板
2015/03/06 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技