js父页面中使用子页面的方法


Posted in Javascript onJanuary 09, 2016

iframe是非常常用的一个html元素,如果在父页面中使用子页面的方法应该怎么写呢,下面就做一下简单的介绍。
一、父页面代码

<html>
<head>
<meta charset=" gb2312">
<title>父页面</title>
<script type="text/javascript">
function parentFunction() 
{
 alert('function in parent');
}
function callChild() 
{
 child.window.childFunction();
 /*
  child 为iframe的name属性值,
  不能为id,因为在FireFox下id不能获取iframe对象
 */
}
</script>
</head>
<body>
 <iframe name="child" src="./child.html" ></iframe>
</body>
</html>

二、iframe中的代码

<html>
<head>
<meta charset="gb2312">
<title>iframe代码</title>
<script type="text/javascript">
function childFunction() 
{
 alert('function in child');
}
function callParent() 
{
 parent.parentFunction();
}
</script>
</head>
<body>
</body>
</html>

上面两个代码可以在父页面和子页面对对方的函数进行相互调用,比较简单,不多介绍了。
希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 #Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 #Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 #Javascript
javascript跑马灯抽奖实例讲解
Apr 17 #Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 #Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php接口实现拖拽排序功能
2018/04/23 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Django视图和URL配置详解
2018/01/31 Python
python发送告警邮件脚本
2018/09/17 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
加拿大留学自荐信
2014/01/28 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
求职自我评价范文
2015/03/09 职场文书
活动经费申请报告
2015/05/15 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript