标签:
前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求。
B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面。
由于是Web网站,项目是要发布在服务端上,通过后台去读硬件信息,也是读到的是服务器的硬件信息。
故考虑用JS中的ActiveXObject对象,读取到硬件的显示器(监视器)信息,比如数量、分辨率。
此处使用ActiveXObject对象,由于项目限制用的是IE9,打开窗口用的是window.open()
创建ActiveXObject对象,查询监视器的信息。
var locator = new ActiveXObject("WbemScripting.SWbemLocator"); var service = locator.ConnectServer("."); //显示器 var xsq = new Enumerator(service.ExecQuery("select * from Win32_DesktopMonitor")); //得到所有显示器的分辨率 //如果有2个显示器,则有2对分辨率;反之,则为1个显示器 //考虑到后期可能有3个显示屏,所以如下去取值。 var xsq1Width; var xsq1Height; var xsq2Width; var xsq2Height; var i = 1; for (; !xsq.atEnd() ; xsq.moveNext()) { if (i == 1) { xsq1Width = xsq.item().ScreenWidth; xsq1Height = xsq.item().ScreenHeight; } else if (i == 2) { xsq2Width = xsq.item().ScreenWidth; xsq2Height = xsq.item().ScreenHeight; } i++; }
为何我要取的是监视器的分辨率,而不是监视器的Name,这是根据取到的数据发现:1个屏时,监视器2的分辨率宽、高是有值的,监视器2的分辨率宽、高为null
由此根据分辨率宽、高是否为null,来判断是否是单屏。
//判断单双屏 if (xsq2Width == null && xsq2Height == null) { window.open("about:blank", "", "top=0,left=0,width=" + xsq1Width + ",height=" + xsq1Height + ""); } else { //双屏时 }
双屏时,发现用window.screenLeft、window.screen.width、window.screen.height、得到的监视器1、2的宽/高
去判断,哪个是主屏?程序在主屏上启动时,在副屏上启动时。
//显示器1是主屏 if (window.screen.width == xsq1Width && window.screen.height == xsq1Height) { if (window.screenLeft >= 0 && window.screenLeft < xsq1Width) { //从左向右跳 window.open("about:blank", "", "top=0,left=" + xsq1Width + ",width=" + xsq2Width + ",height=" + xsq2Height + ""); } if (window.screenLeft >= xsq1Width && window.screenLeft < (xsq1Width + xsq2Width)) { //从右向左跳 window.open("about:blank", "", "top=0,left=0,width=" + xsq1Width + ",height=" + xsq1Height + ""); }
} //显示器2是主屏 if (window.screen.width == xsq2Width && window.screen.height == xsq2Height) { if (window.screenLeft >= 0 && window.screenLeft < xsq2Width) { //从右向左跳 //由于此处跳转有点问题,不能向左偏移。
window.open("about:blank", "", "top=0,left=0,width=" + xsq1Width + ",height=" + xsq1Height + ""); } if (window.screenLeft >= (-xsq1Width) && window.screenLeft < 0) { //从左向右跳 var objWin = window.open("about:blank", "", "top=0,left=0,width=" + xsq2Width + ",height=" + xsq2Height + ""); } }
上面代码中,标红的打开新窗口跳转,按照我的逻辑应该是从右向左跳转,但是不知为何,在IE9中,window.open() 向左偏移不了。
于是就打算在打开的新窗口中去加速window.moveTo(-显示屏宽度,0);以此来达到向左偏移的目的。
<script> window.moveTo(-1600, 0); </script>
最后将完整代码附上,也就是一个html页面:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>JavaScript单双屏跳转</title> <script type="text/javascript"> window.onload = function () { document.getElementById("btnZX").onclick = function () { var locator = new ActiveXObject("WbemScripting.SWbemLocator"); var service = locator.ConnectServer("."); //显示器 var xsq = new Enumerator(service.ExecQuery("select * from Win32_DesktopMonitor")); //得到所有显示器的分辨率 //如果有2个显示器,则有2对分辨率;反之,则为1个显示器 var xsq1Width; var xsq1Height; var xsq2Width; var xsq2Height; var i = 1; for (; !xsq.atEnd() ; xsq.moveNext()) { if (i == 1) { xsq1Width = xsq.item().ScreenWidth; xsq1Height = xsq.item().ScreenHeight; } else if (i == 2) { xsq2Width = xsq.item().ScreenWidth; xsq2Height = xsq.item().ScreenHeight; } i++; } //判断单双屏 if (xsq2Width == null && xsq2Height == null) { window.open("about:blank", "", "top=0,left=0,width=" + xsq1Width + ",height=" + xsq1Height + ""); } else { alert("\n\twindow.screenLeft " + window.screenLeft + "\n\twindow.screen.width " + window.screen.width + "\n\txsq1Width " + xsq1Width + "\n\txsq2Width " + xsq2Width); //显示器1是主屏 if (window.screen.width == xsq1Width && window.screen.height == xsq1Height) { if (window.screenLeft >= 0 && window.screenLeft < xsq1Width) { //从左向右跳 window.open("about:blank", "", "top=0,left=" + xsq1Width + ",width=" + xsq2Width + ",height=" + xsq2Height + ""); } if (window.screenLeft >= xsq1Width && window.screenLeft < (xsq1Width + xsq2Width)) { //从右向左跳 window.open("about:blank", "", "top=0,left=0,width=" + xsq1Width + ",height=" + xsq1Height + ""); } } //显示器2是主屏 if (window.screen.width == xsq2Width && window.screen.height == xsq2Height) { if (window.screenLeft >= 0 && window.screenLeft < xsq2Width) { //从右向左跳 //由于此处跳转有点问题,不能向左偏移 window.open("http://localhost:6019/NewPage.html", "", "top=0,left=0,width=" + xsq1Width + ",height=" + xsq1Height + ""); } if (window.screenLeft >= (-xsq1Width) && window.screenLeft < 0) { //从左向右跳 var objWin = window.open("about:blank", "", "top=0,left=0,width=" + xsq2Width + ",height=" + xsq2Height + ""); } } } } } </script> </head> <body> <div> <button type="button" id="btnZX">单双屏跳转</button> </div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>新页面</title> </head> <body> </body> </html> <script> window.moveTo(-1600, 0); </script>
以上全部代码可能在打逻辑上可能有更好的思路,在代码上有大的优化。
还请各位朋友们看过或需要此文的朋友,发表自己的看法,谢谢!
Web网站中利用JavaScript中ActiveXObject对象获取硬件信息(显示器数量、分辨率)从而进行单双屏跳转
标签:
原文地址:http://www.cnblogs.com/gilbert/p/5421530.html