<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script>
var isServerOk = false
var isSetupOk = false
function gotoDemo()
{
if (!isServerOk || !isSetupOk){
alert("环境检测失败，请启动本地服务端")
return
}
window.location.href="http://127.0.0.1:3888/index.html"
}
function envReTest(){
window.document.getElementById("serverTest").innerHTML = ""
window.document.getElementById("setupTest").innerHTML = ""
setTimeout(envTest, 1000);
}
function envTest(){
//1.服务端检测
var xhr =getHttpObj()
xhr.onload=function(e){
isServerOk = true
var result = "1.检测本地服务端(http://127.0.0.1:3888)是否连通："
window.document.getElementById("serverTest").innerHTML = result + "检测成功，服务端地址为http://127.0.0.1:3888"
}
xhr.onerror=function(e){
isServerOk = false
var result = "1.检测本地服务端(http://127.0.0.1:3888)是否连通："
window.document.getElementById("serverTest").innerHTML = result + "检测失败, 请先通过node启动StartupServer.js"
}
xhr.open('get', 'http://127.0.0.1:3888/FileList', true)
xhr.send()
//2.安装包检测
var xhr1 =getHttpObj()
xhr1.onload=function(e){
isSetupOk = true
var result = "2.检测wps安装是否正确："
window.document.getElementById("setupTest").innerHTML = result + xhr1.responseText
}
xhr1.open('get', 'http://127.0.0.1:3888/WpsSetupTest', true)
xhr1.send()
}
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6; //IE版本<=7
}
} else if (isEdge) {
return 20; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return 30; //不是ie浏览器
}
}
function getHttpObj() {
var httpobj = null;
if (IEVersion() < 10) {
try {
httpobj = new XDomainRequest();
} catch (e1) {
httpobj = new createXHR();
}
} else {
httpobj = new createXHR();
}
return httpobj;
}
//兼容IE低版本的创建xmlhttprequest对象的方法
function createXHR() {
if (typeof XMLHttpRequest != 'undefined') { //兼容高版本浏览器
return new XMLHttpRequest();
} else if (typeof ActiveXObject != 'undefined') { //IE6 采用 ActiveXObject， 兼容IE6
var versions = [ //由于MSXML库有3个版本，因此都要考虑
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for (var i = 0; i < versions.length; i++) {
try {
return new ActiveXObject(versions[i]);
} catch (e) {
//跳过
}
}
} else {
throw new Error('您的浏览器不支持XHR对象');
}
}
</script>
<body onload="envTest()">
<div style="display: flex;"><span style="color: #1890ff; margin: 30px auto; font-size: 50px; font-weight: bolder;">OA助手演示Demo</span></div>
<div class="divstyle0" id="envTest">
<span>开始境检测：</span><br>
<span id="serverTest"></span><br>
<span id="setupTest"></span><br>
</div>
<div class="divstyle">
<span class="arrow">→</span>
<button class="ant-btn" onclick="gotoDemo()">点击开始体验</button>
</div>
<br>
<div><button id="btnEnvTest" onclick="envReTest()">重新开始环境检测</button></div>
<style>
.divstyle0{
border:1px solid black;
height: 300px;
width: 40%;
float: left;
font-size: 15px;
color: dimgray;
}
.divstyle{
height: 300px;
width: 40%;
vertical-align: middle;
display:flex;
align-items:center;
}
.arrow{
font-size: 50px;
color: #1890ff;
font-weight: bolder;
vertical-align: middle;
}
.ant-btn {
vertical-align: middle;
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 500;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 50px;
padding: 0 15px;
font-size: 20px;
border-radius: 4px;
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
}
#btnEnvTest {
vertical-align: middle;
margin: 5px;
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 200;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 30px;
padding: 0 15px;
font-size: 20px;
border-radius: 4px;
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
}
</style>
</html>