在父页面调用子页面的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 相关文章推荐
JS实现的省份级联实例代码
Jun 24 Javascript
jquery的map与get方法详解
Nov 04 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
动态加载jquery库的方法
Feb 12 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
Vue slot用法(小结)
Oct 22 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 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
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
python列表操作实例
2015/01/14 Python
Python求导数的方法
2015/05/09 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
美容院考勤制度
2014/01/30 职场文书
大学毕业自我评价
2014/02/02 职场文书
股东合作协议书
2014/09/12 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL