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弹性滑动导航菜单实现思路及代码
May 02 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue观察模式浅析
Sep 25 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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 已经成熟
2006/12/04 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP实现的购物车类实例
2015/06/17 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
函数指针的定义是什么
2016/08/14 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
公司活动方案范文
2014/03/06 职场文书
认真学习保证书
2015/02/26 职场文书
2015年药店工作总结
2015/04/20 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers