maoting

浏览: 47407 次
性别:
来自: 北京

最近访客更多访客>>

iy2017

eyeti123

小动物不困

吴小帅啊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

窗口关系以及框架

博客分类：

javascript

窗口关系以及框架

top对象：始终指向最高（最外）层的框架，也就是浏览器窗口。

window对象：指向的是哪个框架的特定实例。

parent（父）对象：始终指向当前框架的直接上层框架。

self对象：始终指向window，实际上，self和window对象可以互换使用。

所有这些对象都是window对象，可以通过window.parent、window.top等形式访问。同时，这也意味着可以将不同层次的window对象连缀起来，例如：window.parent.parent.frames[0].

页面的结构图：

以下代码是在Aptana中运行的，注意如果window.onload中写js代码的作用是保证已经加载完所有框架。

frameset.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type = "text/javascript">
window.onload = function(){
	console.log("------result form frameset page-----------");
    var oFrame1 = document.getElementById("frame1");
    console.log(oFrame1.className);   //输出left
    console.log(oFrame1 == window.frames[0]);   //输出false，为什么会不相等？不是应该都是指第一个frame元素么？
    
    console.log(window.frames.length);   //输出2，说明有两个frame元素
    console.log(window.frames[0].className);   //输出undefinded,为什么不是left？
    
    //以上问题解答：（引用自：http://s.yanghao.org/program/viewdetail.php?i=270071）
    //document.getElementById("frame1")//获得的是页面元素 
	//window.frames[0]获得的是子窗体
	//两者的类型不一样
	
	 //self = top
	 console.log(window.frames[0].name);//topFrame
	 console.log(window.frames["topFrame"].name);//topFrame
	 console.log(top.frames[0].name);//topFrame
	 console.log(top.frames["topFrame"].name);//topFrame
	 console.log(frames[0].name);//topFrame
	 console.log(frames["topFrame"].name);//topFrame
	 console.log(self.frames[0].name);//topFrame
	 console.log(self.frames["topFrame"].name);//topFrame
	 
	 console.log(window.frames[1].name);//leftFrame
	 console.log(window.frames["leftFrame"].name);//leftFrame
	 console.log(top.frames[1].name);//leftFrame
	 console.log(top.frames["leftFrame"].name);//leftFrame
	 console.log(frames[1].name);//leftFrame
	 console.log(frames["leftFrame"].name);//leftFrame
	 console.log(self.frames[1].name);//leftFrame
	 console.log(self.frames["leftFrame"].name);//leftFrame
	 console.log("------result form frameset page-----------");
}
</script>
</head> 
<frameset rows="160,*">
	<frame id="frame1" class = "left" src="frame.html" name="topFrame" />
	<frameset cols="50%,50%">
		<frame src="anotherfame.html" name="leftFrame" />
		<frame src="yetanotherfame.html" name="rightFrame" />
	</frameset>
</frameset>

</html>

frame.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>frame</title> 
<script type="text/javascript">
window.onload = function(){
	console.log("------result form frame page-----------");
	//parent == top
	console.log(window.parent.frames[0].name);//topFrame
	console.log(window.parent.frames["topFrame"].name);//topFrame
	console.log(top.frames[0].name);//topFrame
	console.log(top.frames["topFrame"].name);//topFrame
	
	console.log(window.frames[0].name);//subLeftFrame
	console.log(self.frames[0].name);//subLeftFrame
	console.log("------result form frame page-----------");//topFrame
}
</script>
</head> 
<frameset cols="50%,50%">
	<frame src="subfameLeft.html" name="subLeftFrame" />
	<frame src="subfameRight.html" name="subRightFrame" />
</frameset>
</html>

anotherfame.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type="text/javascript">
window.onload = function(){
	console.log("------result form anotherframe page-----------");
	//parent == top
	console.log(window.parent.frames[0].name);//topFrame
	console.log(window.parent.frames["topFrame"].name);//topFrame
	console.log(top.frames[0].name);//topFrame
	console.log(top.frames["topFrame"].name);//topFrame
	console.log("------result form anotherframe page-----------");
}
</script>
</head> 
<body>
	anotherfame.html
</body>
</html>

yetanotherfame.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>
    <title>测试图片加载顺序</title>
</head>
<body>
    yetanotherfame.html
</body>
</html>

subfameLeft.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS z-index Property</title> 
<script type="text/javascript">
window.onload = function(){
	console.log("------result form subfameLeft page-----------");
	//parent != top
	console.log(window.parent.frames[0].name);//subLeftFrame
	console.log(window.parent.frames["subLeftFrame"].name);//subLeftFrame
	console.log(top.frames[0].name);//topFrame
	console.log(top.frames["topFrame"].name);//topFrame
	//console.log(window.parent.frames["topFrame"].name);//error
	//console.log(top.frames["subLeftFrame"].name);//error
	console.log("------result form subfameLeft page-----------");
}
</script>
</head> 
<body>
	subfameLeft.html
</body>
</html>

window.open()：

既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

这个方法接受四个参数：

要加载的URL、
窗口目标、
一个特定字符串
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔。

参数2可以是一个窗口或框架的名称或者是下列任意一个特殊的窗口名称：_self、_parent、_top或者_blank。详细解析如下：

解释参数2的代码都是写在subfameLeft.html中

以下二者效果相同，即运行frameset.html页面时，整个页面是http://www.aia.com.vn/vn/的内容

window.open("http://www.aia.com.vn/vn/","_top");

top.location.href = "http://www.aia.com.vn/vn/";

以下二者效果相同，即运行frameset.html页面时，在frame的位置显示http://www.aia.com.vn/vn/的内容

parent.location.href = "http://www.aia.com.vn/vn/";

window.open("http://www.aia.com.vn/vn/","_parent");

以下效果相同：当运行frameset.html页面时，在subfameLeft位置显示http://www.aia.com.vn/vn/的内容

self.location.href = "http://www.aia.com.vn/vn/";

window.location.href = "http://www.aia.com.vn/vn/";

window.open("http://www.aia.com.vn/vn/","_self");

当运行frameset.html页面时，弹出一个新窗口http://www.aia.com.vn/vn/

window.open("http://www.aia.com.vn/vn/","_blank");

参数3：如果第二个参数并不是一个已经存在窗口或者框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或者标签页。如果没有传入参数3，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏）的新浏览器窗口，在不打开新窗口的情况下，会忽略参数3，参数3是一个逗号分割的键值对（=连结键值对）的字符串。

channelmode=yes\|no\|1\|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes\|no\|1\|0	是否添加目录按钮。默认为 yes。
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes\|no\|1\|0	是否显示地址字段。默认是 yes。
menubar=yes\|no\|1\|0	是否显示菜单栏。默认是 yes。
resizable=yes\|no\|1\|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes\|no\|1\|0	是否显示滚动条。默认是 yes。
status=yes\|no\|1\|0	是否添加状态栏。默认是 yes。
titlebar=yes\|no\|1\|0	是否显示标题栏。默认是 yes。
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

例如：

window.open("http://www.aia.com.vn/vn/","_blank","height=400,width=400,top=10,left=10,resizeable=yes");

window.open()方法返回一个指向新窗口的引用，我们可以通过它对新窗口进行控制。

var wroxWin = window.open("http://www.aia.com.vn/vn/","_blank","height=400,width=400,top=10,left=10,resizeable=yes");

新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。

判断弹出窗口是否被屏蔽

var blocked = false;
	try{
		var wroxWin = window.open("http://www.aia.com.vn/vn/","_blank");
		if(wroxWin == null){
			blocked = true;
		}
	}catch(ex){
		blocked = true;
	}
	if(blocked){
		alert("The popup was blocked");
	}