Web网站中利用JavaScript中ActiveXObject对象获取硬件信息（显示器数量、分辨率）从而进行单双屏跳转

前言：最近这两天工作上，要实现一个功能，在好友阿聪的帮助下，算是比较好的解决了这个需求。

　　B/S的Web网站，需要实现点击按钮时，根据客户端连接的显示屏（监视器）数量进行，单双屏跳转显示新页面。

 

由于是Web网站，项目是要发布在服务端上，通过后台去读硬件信息，也是读到的是服务器的硬件信息。

故考虑用JS中的ActiveXObject对象，读取到硬件的显示器（监视器）信息，比如数量、分辨率。

此处使用ActiveXObject对象，由于项目限制用的是IE9，打开窗口用的是window.open()

IE测试Demo：js get sreen info for ie

 

创建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>

 

以上全部代码可能在打逻辑上可能有更好的思路，在代码上有大的优化。

还请各位朋友们看过或需要此文的朋友，发表自己的看法，谢谢！

posted @ 2016-04-22 15:43  陈哲Gilbert  阅读(4429)  评论(3)  编辑  收藏  举报