在父页面调用子页面的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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
微信小程序实现评论功能
Nov 28 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
python中的lambda表达式用法详解
2016/06/22 Python
json跨域调用python的方法详解
2017/01/11 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
门卫工作岗位职责
2013/12/17 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
给女朋友的道歉信
2014/01/10 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
Django与数据库交互的实现
2021/06/03 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
python的html标准库
2022/04/29 Python