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 相关文章推荐
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
安装vue-cli的简易过程
May 22 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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
?繁体转换的class
2006/10/09 PHP
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python字符串判断密码强弱
2020/03/18 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
团委竞选演讲稿
2014/04/24 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
确保工程质量承诺书
2015/04/29 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL