在父页面调用子页面的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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Node.js编码规范
2014/07/14 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python Grid使用和布局详解
2018/06/30 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
什么是SCM(软件配置管理)
2014/08/16 面试题
个人融资协议书
2014/10/02 职场文书
环保守法证明
2015/06/24 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Redis安装启动及常见数据类型
2021/04/14 Redis
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
python神经网络Xception模型
2022/05/06 Python