zoukankan      html  css  js  c++  java
  • 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("
    	window.screenLeft " + window.screenLeft + "
    	window.screen.width " + window.screen.width
                            + "
    	xsq1Width " + xsq1Width + "
    	xsq2Width " + 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>

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

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

  • 相关阅读:
    替换所有的cell的右侧箭头
    (转载)iOS UILabel自定义行间距时获取高度
    UITableViewCell的separator分隔线设置失效
    tableview中在tableheaderView上放一个视图,第一次进入视图显示不正常,往下拉视图仍然不正常,往上拉视图正常
    Xcode打印frame id
    使用System Sound Services 播放音效(最简单,比较底层),调用AudioServicesPlaySystemSound()
    tcpdump
    /pentest/sniffers/hamster
    dsniff
    /usr/local/sbin/dsniff
  • 原文地址:https://www.cnblogs.com/gilbert/p/5421530.html
Copyright © 2011-2022 走看看