我正在使用java/servlet
和前端开发一个 Web 应用程序JSP
。
我的页面为用户显示一些信息。
是否有任何适当的方法来检查网络连接是否处于活动状态(开/关)以及支持所有浏览器和设备?
如果网络出现故障,我想使用适当的消息重定向到其他页面。
我阅读了有关使用的信息,navigator.onLine
但并非所有浏览器都支持它,有时它也会给出错误的结果。
我正在使用java/servlet
和前端开发一个 Web 应用程序JSP
。
我的页面为用户显示一些信息。
是否有任何适当的方法来检查网络连接是否处于活动状态(开/关)以及支持所有浏览器和设备?
如果网络出现故障,我想使用适当的消息重定向到其他页面。
我阅读了有关使用的信息,navigator.onLine
但并非所有浏览器都支持它,有时它也会给出错误的结果。
在大多数浏览器中都有一个用于 this: 的原生属性navigator.onLine
,但是目前它的实现因浏览器而异,因此很难在任何现实世界的情况下使用。
考虑到这一点,我使用以下 javascript 函数来检查我的页面是否已连接到网络。它非常简单,应该可以跨浏览器工作。它通过尝试从服务器加载图像并捕获发生的任何错误来工作:
var isOnline = true;
function onlineCheck(){
var testImg = new Image();
testImg.onerror = function(){
isOnline = false
alert("Web access is unavailable. Please check that you are connected to the internet.")
}
testImg.onload = function(){ isOnline = true; }
testImg.src = "https://www.google.ie/images/srpr/logo4w.png"; //replace this with an image on your site
}
testImg.src
在您的网站上将图像更改为 1x1 像素图像是个好主意。这将更快加载,因为与您的域的连接可能已经打开。我通常为此使用动态生成的图像,因为我发现实现几行代码比创建和上传真实图像更容易。万一你想试试这个,我已经包含了我用来制作 1x1 像素图像的 PHP 代码。您可以轻松地将其适应 JSP:
header( "Content-type: image/gif");
header("Cache-Control: no-cache");
header("Cache-Control: must-revalidate");
printf ("%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c",71,73,70,56,57,97,1,0,1,0,128,255,0,192,192,192,0,0,0,33,249,4,1,0,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59);
exit();
判断 Web 应用程序是否有工作连接的唯一正确方法是调用远程服务并等待响应。如果请求失败或超时,那么您可以假设没有连接。
导航器 API 的问题在于它只会告诉您设备是否连接到第一层,无论是路由器还是 LAN 等,而不是真正连接到互联网。
很简单,以下内容可以解决问题......
var appConnected = false;
function checkConnection() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.timeout = 1000 //Miliseconds - Set this to whatever you feel appropriate for your app
xmlHttp.open('GET', 'http://yourdomain.com/1x1.gif', true);
xmlHttp.onreadystatechange = function () {
switch (xmlHttp.readyState) {
case 4:
var r = xmlHttp.responseText;
if ( xmlHttp.status === 200 ) {
appConnected = true;
} else {
appConnected = false;
}
break;
default:
appConnected = false;
}
};
}
var intervalID = window.setInterval(checkConnection, 5000);
这将每 5 秒运行一次 - 这取决于您的特定用例可能不是那么有效。请记住考虑您的用户数据和带宽。
完成轮询连接状态后,使用...清除间隔
clearInterval(nIntervId);
您的另一个选择可能是在 HTML5 应用程序缓存中使用后备选项 - 尽管如果您针对的是旧设备,这可能是不可能的。