之前一直都不太知道他们之间的区别,今天做了一些小测验来总结他们之间的区别。
这里强调的是不是指的是网页(返回网页的首页或者上一个网页),而是指的是一个网页中的窗口(框架)。如果不清楚,那就继续往下看吧。
首先从英文上知道,parent肯定是指父元素的窗口,top指的是最顶层的窗口,self就是指自身的窗口了。
1)window.self
对当前窗口自身的引用。
2)window.top
返回顶层窗口,也就是浏览器的窗口。有一些窗口嵌套了好几层的窗口,我们就可以使用window.top去判断,然后再执行其他的一些操作。
3)window.parent
返回的是父窗口
我们先来看代码,这些代码都是比较简单的。我设置了3个页面,因为这个是指框架,所以我用第二个文件中包含两个文件(也就是说包含两个框架)。
3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/JavaScript">
var b = window.top==window.self;
document.write( "顶层窗口与自身的窗口在一起吗:"+b );
</script>
</head>
<body>
<div class="top" >我这个是一个框架噢,很明显它是存在于一个窗口内的,所以我用它去判断究竟它是不是处于顶层窗口</div>
</body>
</html>
2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/JavaScript">
var b = window.top==window.self;
document.write( "顶层窗口与自身的窗口在一起吗:"+b );
</script>
</head>
<body>
<div class="top" >我这也是是一个框架噢,</div>
</body>
</html>
3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<frameset cols="50%,50%">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
</html>
从这个结果上看来,因为1.html ,2.html都是存在于3.html的框架中,所以他们自身都不是顶层窗口来的。一般情况下的顶层窗口都是父层窗口来的。我这里设置的是50%,50%的框架宽度,由于没有完全截图出来,所以会混淆。