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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
JS中常用的消息框总结
Feb 24 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 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版国家代码、缩写查询函数代码
2011/08/14 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
异步动态加载js与css文件的js代码
2013/09/15 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
初三新学期计划书
2014/05/03 职场文书
公司募捐倡议书
2014/05/14 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python