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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
Javascript Select操作大集合
May 26 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
删除节点的jquery代码
Jan 13 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
KnockoutJs快速入门教程
May 16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
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
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
Jquery操作cookie记住用户名
2016/03/29 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
简单学习vue指令directive
2016/11/03 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python编写分类决策树的代码
2017/12/21 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
同居协议书范本
2014/04/23 职场文书
邀请函模板
2015/02/02 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
英语读书笔记
2015/07/02 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python