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(DHTML)中的一些技巧
Jan 09 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
JavaScript显式数据类型转换详解
Mar 18 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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的源码中深入了解stdClass类
2014/04/18 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
numpy 声明空数组详解
2019/12/05 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
电焊工工作岗位职责
2014/02/06 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
企业文化理念标语
2014/06/10 职场文书
预备党员个人总结
2015/02/14 职场文书
医院合作意向书范本
2015/05/08 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers