Web網站中利用JavaScript中ActiveXObject對象獲取硬件信息（顯示器數量、分辨率）從而進行單雙屏跳轉

本文轉載自查看原文 2016-04-22 15:43 2317 ActiveXObject/ WebForm/ JavaScript/ ASP.NET/ .WebForm

前言：最近這兩天工作上，要實現一個功能，在好友阿聰的幫助下，算是比較好的解決了這個需求。

　　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>

以上全部代碼可能在打邏輯上可能有更好的思路，在代碼上有大的優化。

還請各位朋友們看過或需要此文的朋友，發表自己的看法，謝謝！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Qt5 多顯示器獲取不同顯示器的分辨率和位置的方法 JS獲取瀏覽器信息及屏幕分辨率 Linux下手動添加顯示器分辨率 Deppin系統 Liunx顯示器分辨率異常解決方法關於電腦擴展屏幕顯示器的分辨率太高字小的解決辦法 Ubuntu: Linux下查看本機顯示器分辨率(xrandr) Ubuntu無法識別顯示器情況下，高分辨率的設置 TX2-ubuntu無外接顯示器遠程桌面時分辨率過低 GeForce GTX 650 Ti支持的最大分辨力，看顯示器支持的最大分辨率 JavaScript中的ActiveXObject對象