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

男娘i 2022-08-26 12:20 159阅读 0赞

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像素宽高，然后生成一个任意数字来随机定位窗口在屏幕中的显示位置。

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

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