在父页面调用子页面的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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
Javascript开发包大全整理
Dec 22 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python实现求最长回文子串长度
2018/01/22 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
css3中transition属性详解
2014/09/02 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
法学专业大学生实习自我鉴定
2014/10/05 职场文书
社区综治工作汇报
2014/10/27 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2015年检验科工作总结
2015/04/27 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
旅游投诉信范文
2015/07/02 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python