在父页面调用子页面的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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
javascript 播放器 控制
2007/01/22 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JavaScript知识点整理
2015/12/09 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python序列化与数据持久化实例详解
2019/12/20 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
成教毕业生自我鉴定
2013/10/23 职场文书
应届生骨科医生求职信
2013/10/31 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
奖金申请报告模板
2015/05/15 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle