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 Hack
Jul 24 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
js Proxy的原理详解
May 25 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 sprintf()函数用例解析
2011/05/18 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
js中this的用法实例分析
2015/01/10 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
详细探究Python中的字典容器
2015/04/14 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
Java面试题及答案
2012/09/08 面试题
英文自荐信
2013/12/15 职场文书
公司拓展活动方案
2014/02/13 职场文书
农村葬礼主持词
2014/03/31 职场文书
测量员岗位职责
2015/02/14 职场文书
百年孤独读书笔记
2015/06/29 职场文书
运动会宣传语
2015/07/13 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书