js中top/parent/frame概述及案例应用
更新时间：2013年02月06日 11:43:35 作者：
top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top、parent、frame进行讲述及他们的应用案例
引用方法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>
该变量永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用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>
您可能感兴趣的文章:
- JS获取scrollHeight问题想到的标准问题
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
- js获取height和width的方法说明
- 利用JS解决ie6不支持max-width,max-height问题的方法
- js中的preventDefault与stopPropagation详解
- js中top的作用深入剖析
- window.top[_CACHE]实现多个jsp页面共享一个js对象
- JS获取iframe中marginHeight和marginWidth属性的方法
- JS中完美兼容各大浏览器的scrolltop方法
- js中不同的height, top的区别对比
相关文章
下面小编就为大家带来一篇对Js OOP编程 创建对象的一些全面理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
location对象中涵盖了当前页面（本页面）或者更直接的说是当前加载的这个html文档的url信息，可以通过window.location老访问2014-08-08
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下2015-07-07
本文详细讲解了JavaScript实现数据类型转换的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
本文主要从前端开发者的角度谈一谈大多数前端开发者都会遇到的js错误，对错误产生的原因、发生阶段，以及如何应对错误进行分析、归纳和总结，希望得到一些有益的结论用来指导日常开发工作。2019-08-08
为大家更好的接触和学习js资料，所以我转了这篇文章，我大约的看了下，文章写的非常不错，希望大家不要急，慢慢看，第一次看不懂不要紧，多练习就可以了2008-07-07
这篇文章主要介绍了简介JavaScript中substring()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
JavaScript 学习笔记（九）call和apply方法
两者实现的功能是完全一样的，只是参数传递方式不一样，call是将各个参数以逗号（,）隔开，而apply是将所有参数组成一个数组进行传递。2010-01-01
这篇文章主要介绍了HTML form表单提交方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了JS浏览器储存，对存储数据感兴趣的同学，可以参考下2021-05-05
最新评论