在父页面调用子页面的JS方法


Posted in Javascript onSeptember 29, 2013

今天弄了一天了,终于在网上找到了解决办法

注意:问题是在父页面调用子页面的方法。。。。。

父页面:parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent</title>
<script>
 function parentFunction() {
  alert('function in parent');
 }
 function callChild() {
  child.window.childFunction();
  /*
   child 为iframe的name属性值,
   不能为id,因为在FireFox下id不能获取iframe对象
  */
 }
</script>
</head>
<body>
<input type="button" name="call child"  value="call child" onclick="callChild()"/>
<br/><br/>
<iframe name="child" src="./child.html" ></iframe>
</body>
</html>

子页面:child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child</title>
<script>
 function childFunction() {
  alert('function in child');
 }
 function callParent() {
  parent.parentFunction();
 }
</script>
</head>
<body>
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>
</body>
</html>

大家可以根据自己的需求修改相应的代码即可。。。。。。。
Javascript 相关文章推荐
JS Map 和 List 的简单实现代码
Jul 08 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
JavaScript函数基础详解
Feb 03 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
javascript完美拖拽的实现方法
Sep 29 #Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 #Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 #Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 #Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 #Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 #Javascript
jquery事件与函数的使用介绍
Sep 29 #Javascript
You might like
PHP与SQL注入攻击[一]
2007/04/17 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
js闭包学习心得总结
2018/04/17 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
django中模板的html自动转意方法
2018/05/27 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
介绍一下Ruby的特点
2013/01/20 面试题
公司地址变更通知
2015/04/25 职场文书
单身证明范本
2015/06/15 职场文书
python基础之匿名函数详解
2021/04/21 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python