在父页面调用子页面的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 相关文章推荐
angularJS 入门基础
Feb 09 Javascript
javascript常用方法总结
May 14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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分页显示制作详细讲解
2006/10/09 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
家长给孩子的表扬信
2014/01/17 职场文书
高一物理教学反思
2014/01/24 职场文书
便利店投资创业计划书
2014/02/08 职场文书
班组长岗位职责
2014/03/03 职场文书
超市创意活动方案
2014/08/15 职场文书
个人年终总结范文
2015/03/09 职场文书
胡桃夹子观后感
2015/06/11 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android