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修改input的type属性问题探讨
Oct 12 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
Three.js快速入门教程
Sep 09 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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/10/08 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP实现倒计时功能
2020/11/16 PHP
JS基础之undefined与null的区别分析
2011/08/08 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
python正则表达式之作业计算器
2016/03/18 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python实现简单日期工具类
2019/04/24 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
优秀员工个人的自我评价
2013/11/29 职场文书
党员自我剖析材料
2014/08/31 职场文书
招商引资工作汇报
2014/10/28 职场文书
导游词怎么写
2015/02/04 职场文书
运动会致辞稿
2015/07/29 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
python办公自动化之excel的操作
2021/05/23 Python