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之可拖动的iframe效果代码
Aug 01 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 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在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
常用js脚本
2006/12/03 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
python3.5的包存放的具体路径
2020/08/16 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
金融管理应届生求职信
2014/02/20 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
本科生就业推荐信
2014/05/19 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Java完整实现记事本代码
2022/06/16 Java/Android