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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue v-on:click传递动态参数的步骤
Sep 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
关于手调机和数调机的选择
2021/03/02 无线电
聊天室php&amp;mysql(二)
2006/10/09 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
js打造数组转json函数
2015/01/14 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
js+html5实现侧滑页面效果
2017/07/15 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
pycharm导入源码的具体步骤
2020/08/04 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
找工作最新求职信
2013/12/22 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
年终晚会主持词
2014/03/25 职场文书
股份合作协议书
2014/04/12 职场文书
电视节目策划方案
2014/05/16 职场文书
土木工程求职信
2014/05/29 职场文书
学雷锋标语
2014/06/25 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS