在父页面调用子页面的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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js添加事件的通用方法推荐
May 15 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
原生js调用json方法总结
Feb 22 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
详解JavaScript执行模型
Nov 16 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+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php文件操作相关类实例
2015/06/18 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
学习Javascript面向对象编程之封装
2016/02/23 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
js轮播图代码分享
2016/07/14 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
期末自我鉴定
2014/01/23 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
花田少年史观后感
2015/06/16 职场文书