认识Javascript中控制窗口大小的Screen和Window对象

Screen对象存储了客户的电脑屏幕信息,这些信息可以用来探测客户端硬件的基本配置

Screen对象的基本属性:

availHight:显示Web浏览器的屏幕可用高度,不包括Windows的任务栏

availWidth:显示Web浏览器的屏幕可用宽度,不包括Windows的快捷方式栏

availLeft:屏幕最左侧的x坐标

availTop:屏幕最顶部的y坐标

colorDepth:浏览器分配的颜色数或者颜色深度

height:显示Web浏览器的屏幕高度

width:显示Web浏览器的屏幕宽度

pixelDepth:显示浏览器的屏幕的颜色深度


以下的例子是演示如何让弹出的窗口居中显示,并且在指定的时间内关闭窗口

<!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>Screen对象</title>
</head>

<body>
<script type="text/javascript">
function center(url)
{
	var h = screen.availHeight/2;
	var w = screen.availWidth/2;
	var hh = (screen.availHeight-h)/2;
	var ww = (screen.availWidth-w)/2;
	var p = "top="+hh+",left="+ww+",width="+w+",height="+h;
	var win = window.open(url,"name",p);
	win.focus();
	setTimeout(function(){
		win.close();
		},5000)
}
center("http://www.baidu.com");
</script>
</body>
</html>


除了Screen对象,Window对象也定义了3组方法分别用来调整窗口位置,大小和滚动条的偏移位置,分别是之前的我的一篇博客中讲到的

moveTo(),moveBy():调整窗口位置的两个函数

resizeTo(),resizeBy():调整窗口大小的两个函数

scrollTo()和scrollBy():调整窗口滚动条的偏移位置的两个函数

这些方法都包含两个参数,分别表示x轴坐标和y轴坐标值。

含To的方法都是绝对的,也就是x和y参数给出的窗口新的绝对位置、大小或滚动偏移。也就是我们常说的"变化到多少"

含By的方法是相对的,也就是在窗口的当前位置、大小或滚动偏移上增加所指定的参数x和y的值。也即是我们常说的"变化了多少"


以下的示例能够将当前的浏览器窗口大小重新设置为200像素宽高,然后生成一个任意数字来随机定位窗口在屏幕中的显示位置。

<script type="text/javascript">
window.onload = function(){
timer = window.setInterval("jump()",1000);
}
function jump(){
window.resizeTo(200,200)
x = Math.ceil(Math.random() * 1024)
y = Math.ceil(Math.random() * 760)
window.moveTo(x,y)
}
</script>

同时Window对象的focus()和blur()方法,用来控制窗口的显示焦点,调用focus()方法会请求系统将键盘焦点赋予窗口,会把窗口移到堆栈顺序的顶部,使窗口可见,调用blur()则会放弃键盘焦点。

注意:使用Window对象的open()方法打开新的窗口时,浏览器会自动在顶部创建窗口,不过如果指定的窗口已经存在,则不会自动使那个窗口可见。

认识Javascript中控制窗口大小的Screen和Window对象,布布扣,bubuko.com

认识Javascript中控制窗口大小的Screen和Window对象

上一篇:Struts2常见拦截器概念简述


下一篇:C++随机函数用法详解