js实现iframe跨页面调用函数的方法

更新时间：2014年12月13日 11:55:35 投稿：shichen2014

这篇文章主要介绍了js实现iframe跨页面调用函数的方法,实例展示了iframe中父页面调用子页面和子页面调用父页面的实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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是弱类型的语言，所以强制类型转换还是比较重要的，下面看一下它的几个强制转换的函数
2009-05-05
解决前后端交互数据出现精度丢失的多种方式
这篇文章主要为大家介绍了解决前后端交互数据出现精度丢失的多种方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
JavaScript创建数组的方法详解
这篇文章主要为大家介绍了JavaScript创建数组的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
浅谈js对象属性通过点(.) 和方括号([]) 的不同之处
下面小编就为大家带来一篇浅谈js对象属性通过点(.) 和方括号([]) 的不同之处。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.
2010-03-03
JavaScript的setAttribute兼容性问题解决方法
JavaScript的setAttribute存在兼容性问题，下面与大家分享下具体的解决方法，感兴趣的朋友可以参考下
2013-11-11
javascript 关键字高亮显示实现代码
屏蔽HTML标签，支持多关键字（以空格间隔），关键字内可含有特殊字符
2010-09-09
JavaScript常用脚本汇总（三）
本文给大家分享的常用脚本有通过数组，拓展字符串拼接容易导致性能的问题、页面视口滚动条的位置的辅助函数、调节元素透明度的函数、获取鼠标位置的几个通用的函数、使用cssdisplay属性来切换元素可见性的一组函数、样式相关的通用函数、获取元素当前的高度和宽度。
2015-03-03
使用KrpanoToolJS在浏览器切图的实例详解
这篇文章主要介绍了使用KrpanoToolJS在浏览器切图的实例详解,大概是需要在浏览器中将全景图转为立方体图、多层级瓦片图，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
js showModalDialog参数的使用详解
本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01