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

　　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>

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

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

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

  1. python中利用类创建的对象来保存信息

    在类创建的对象中,一般都是以字典的方式来保存信息 class Student: def __init__(self, name, age, score): self.name = name self. ...

  2. 《挑战30天C++入门极限》C++中利用构造函数与无名对象简化运算符重载函数

        C++中利用构造函数与无名对象简化运算符重载函数 在完整描述思想之前,我们先看一下如下的例子,这个例子中的加运算符重载是以非成员函数的方式出现的: //程序作者:管宁  //站点:www.cn ...

  3. WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式

    原文:WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章介绍在WPF中实现PropertyGr ...

  4. JAVA中利用反射机制进行对象和Map相互转换的方法

    JAVA的反射机制主要作用是用来访问对象的属性.方法等等.所以,JAVA中对象和Map相互转换可以利用JAVA的反射机制来实现.例子如下: 一.对象转Map的方法 public static Map& ...

  5. 在jsp中常用的内置对象（5个）小总结和两种页面跳转方式（服务器端调转、客户端跳转）的区别

    jsp中常用的几个内置对象: 一.request对象 主要作用:  (1)获取请求页面的信息   比如:request.getParameter("参数名");  (2)获取客户端 ...

  6. 在HTML中引用JavaScript中的变量

    和上次的代码几乎一样,但这次是引用已经写好的变量.主要功能和用法如下: document对象的getElementId方法得到HTML元素. HTML元素的value属性可以用来设置变量的值. 02. ...

  7. Android中利用C++处理Bitmap对象

    相信有些Android&图像算法开发者和我一样,遇到过这样的状况:要对Bitmap对象做一些密集计算(例如逐像素的滤波),但是在java层写循环代码来逐像素操作明显是不现实的,因为Java代码 ...

  8. web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...

  9. 在nodejs中利用 Proxy监听对象值的获取

    1 window = new Proxy(global, { 2 get: function (target, key, receiver) { 3 console.log("window. ...

随机推荐

  1. Unity3d学习 预设体(prefab)的一些理解

    之前一直在想如果要在Unity3d上创建很多个具有相同结构的对象,是如何做的,后来查了相关资料发现预设体可以解决这个问题! 预设体的概念: 组件的集合体 , 预制物体可以实例化成游戏对象. 创建预设体 ...

  2. 继电器是如何成为CPU的（1）

    继电器是如何成为CPU的(1) ——<穿越计算机的迷雾>整理和总结 究竟是如何设计的电路,具有计算和控制的智力? 这一点也不高深.本系列文章从初中学的最简单的电路图说起,看看能不能从最初的 ...

  3. Java学习之反射机制及应用场景

    前言: 最近公司正在进行业务组件化进程,其中的路由实现用到了Java的反射机制,既然用到了就想着好好学习总结一下,其实无论是之前的EventBus 2.x版本还是Retrofit.早期的View注解框 ...

  4. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  5. 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. angular2系列教程（八）In-memory web api、HTTP服务、依赖注入、Observable

    大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...

  7. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  8. Android菜单项内容大全

    一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...

  9. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  10. Ubuntu(Linux) + mono + jexus +asp.net MVC3 部署

    感谢  张善友 的建议,我把 微信订餐  由nginx 改成 jexus,目前运行状况来说,确实稳定了很多,再次感谢. 部署步骤参考 jexus官网:http://www.jexus.org/ htt ...