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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
JS动画定时器知识总结
Mar 23 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
详解Javascript实践中的命令模式
May 05 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js获取变量
2006/08/24 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
python学生管理系统代码实现
2020/04/05 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python读写文件write和flush的实现方式
2020/02/21 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
JAVA代码查错题
2014/10/10 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
应聘教师自荐信
2013/10/12 职场文书
星级党支部申报材料
2014/05/31 职场文书
大学生求职信
2014/06/17 职场文书
社区娱乐活动方案
2014/08/21 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
时尚女魔头观后感
2015/06/04 职场文书
行政处罚事先告知书
2015/07/01 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang