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插件Style定制化方法的分析与比较
May 03 Javascript
js切换div css注意的细节
Dec 10 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
js实现3d悬浮效果
Feb 16 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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程序?
2006/12/08 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
基于PHP制作验证码
2016/10/12 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
通俗讲解python 装饰器
2020/09/07 Python
pytorch简介
2020/11/11 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
就业表自我评价分享
2014/02/06 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
新店开张宣传语
2015/07/13 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
利用Python判断你的密码难度等级
2021/06/02 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python