js中top/parent/frame概述及案例应用


Posted in Javascript onFebruary 06, 2013

引用方法top
该变量永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。

parent
该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。
附:Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系

Windwo对象→Parent对象→Frame对象→Document对象→Form对象,如下:
parent.frame1.document.forms[0].elements[0].value;
在JS中:window.location(window.location.href)和window.top.location(window.top.location.href)是一样的意思 可以通过top来调用任何一个frame,因为top指的是最外层的frameset,可以调用它里面的任何一个子元素frame。如:top.outterFrame1.location和top.innerFrame2.location等。

parent指的是当前窗口(frame)的父窗口(frameset)可以调用它里面的任何一个子元素frame。如:parent.innerFrame1.location和parent.innerFrame2.location等。

<html> 
<head> 
<title>top frame parent示例</title> 
<script language="javaScript" type="text/javaScript"> 
window.location.href="http://www.baidu.com/"; 
</script> 
</head> 
<frameset id="outFrameset" rows="150,*,150" cols="*" border="5"> 
<frame name="frameName1" id="frameId1" src="a.html"> 
<frameset id="inFrameset" cols="150,*" rows="*"> 
<frame name="innerFrameName1" id="innerFrameId1" src="a.html"> 
<frame name="innerFrameName2" id="innerFrameId2" src="a.html"> 
</frameset> 
<frame name="frameName2" id="frameId2" src="a.html"> 
</frameset> 
</html>
Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 #Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 #Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 #Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 #Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 #Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 #Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
php日历制作代码分享
2014/01/20 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
判断ie的两种简单方法
2013/08/12 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python实现BackPropagation算法
2017/12/14 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python3中property使用方法详解
2019/04/23 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
python脚本和网页有何区别
2020/07/02 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
软件测试面试题
2014/01/05 面试题
毕业生自我鉴定
2013/11/05 职场文书
婚纱店策划方案
2014/05/22 职场文书
学雷锋标语
2014/06/25 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫