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>
以上全部代码可能在打逻辑上可能有更好的思路，在代码上有大的优化。
还请各位朋友们看过或需要此文的朋友，发表自己的看法，谢谢！
Web网站中利用JavaScript中ActiveXObject对象获取硬件信息（显示器数量、分辨率）从而进行单双屏跳转的更多相关文章
- python中利用类创建的对象来保存信息
在类创建的对象中,一般都是以字典的方式来保存信息 class Student: def __init__(self, name, age, score): self.name = name self. ...
- 《挑战30天C++入门极限》C++中利用构造函数与无名对象简化运算符重载函数
C++中利用构造函数与无名对象简化运算符重载函数 在完整描述思想之前,我们先看一下如下的例子,这个例子中的加运算符重载是以非成员函数的方式出现的: //程序作者:管宁 //站点:www.cn ...
- WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式
原文:WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章介绍在WPF中实现PropertyGr ...
- JAVA中利用反射机制进行对象和Map相互转换的方法
JAVA的反射机制主要作用是用来访问对象的属性.方法等等.所以,JAVA中对象和Map相互转换可以利用JAVA的反射机制来实现.例子如下: 一.对象转Map的方法 public static Map& ...
- 在jsp中常用的内置对象（5个）小总结和两种页面跳转方式（服务器端调转、客户端跳转）的区别
jsp中常用的几个内置对象: 一.request对象 主要作用: (1)获取请求页面的信息 比如:request.getParameter("参数名"); (2)获取客户端 ...
- 在HTML中引用JavaScript中的变量
和上次的代码几乎一样,但这次是引用已经写好的变量.主要功能和用法如下: document对象的getElementId方法得到HTML元素. HTML元素的value属性可以用来设置变量的值. 02. ...
- Android中利用C++处理Bitmap对象
相信有些Android&图像算法开发者和我一样,遇到过这样的状况:要对Bitmap对象做一些密集计算(例如逐像素的滤波),但是在java层写循环代码来逐像素操作明显是不现实的,因为Java代码 ...
- web性能优化之---JavaScript中的无阻塞加载性能优化方案
一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...
- 在nodejs中利用 Proxy监听对象值的获取
1 window = new Proxy(global, { 2 get: function (target, key, receiver) { 3 console.log("window. ...
随机推荐
- opencv中Mat与IplImage,CVMat类型之间转换
opencv中对图像的处理是最基本的操作,一般的图像类型为IplImage类型,但是当我们对图像进行处理的时候,多数都是对像素矩阵进行处理,所以这三个类型之间的转换会对我们的工作带来便利. Mat类型 ...
- 火焰图分析openresty性能瓶颈
注:本文操作基于CentOS 系统 准备工作 用wget从https://sourceware.org/systemtap/ftp/releases/下载最新版的systemtap.tar.gz压缩包 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- C++中的引用
一,C++中引用的基础知识 1.引用的基本概念 1.所谓的引用其实就是对变量起“别名”.引用和变量对应得是相同的内存,修改引用的值,变量的值也会改变,和指针类似. 2.引用在定义的时候必须要初始化,初 ...
- 关于面试题 Array.indexof() 方法的实现及思考
这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...
- Xamarin+Prism开发详解一：PCL跨平台类库与Profile的关系
在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]中提到过以下错误,不知道大伙还记得不: 无法安装程序包"Microsoft.Identity.Client 1.0. ...
- yaf的简单入门
1.目录结构: 2.入口文件 入口文件是所有请求的入口,一般都借助于rewrite规则,把所有的请求都重定向到这个入口文件. 一个经典的入口文件 public/index.php 3.重写规则 需要 ...
- MediatorPattern（中介者模式）
/** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...
- Joshua Bloch错了？ ——适当改变你的Builder模式实现
注:这一系列都是小品文.它们偏重的并不是如何实现模式,而是一系列在模式实现,使用等众多方面绝对值得思考的问题.如果您仅仅希望知道一个模式该如何实现,那么整个系列都会让您失望.如果您希望更深入地了解各个 ...
- Team Leader 你不再只是编码, 来炖一锅石头汤吧
h3{ color: #000; padding: 5px; margin-bottom: 10px; font-weight: bolder; background-color: #ccc; } h ...