江苏龙网

  1. 主页 > 生活百科 > >

JavaScript检测用户是否在线！

JavaScript

前言检查用户是否在线已逐渐成为应用的基础功能，因为大多数网站的用户界面都在不断地与网络服务器通信以进行数据传输，如果用户网络断开，那么应用程序的功能就会受到影响 。
因此，本文将看到一些检测用户何时离线以及用户何时重新在线以在网站上显示一些消息来通知用户的方法 。
1.浏览器对象模型在浏览器对象模型中有 JAVAScript 对象，这些对象在与浏览器交互方面很有用，例如 Window 对象、Navigator 对象、Screen 对象、Document 对象等 。本文将使用两个对象，即：Window对象、Navigator对象来判断用户是否断网 。
Navigator.onLine 属性Navigator 对象用于与浏览器进行交互，可以使用 JavaScript 中的 Navigator 对象获取有关浏览器的所有信息 。Navigator 对象的 onLine 属性可用于检查浏览器是否连接到互联网 。
if (navigator.onLine) {console.log('在线');} else {console.log('离线');} 
该属性的浏览器支持情况如下:

JavaScript检测用户是否在线！

文章插图
 
看起来形式一片大好，整体支持率达到了98.79%，即基本所有的浏览器都已经支持了该属性，包括IE9！
Window对象的Connection事件Javascript为Window对象提供了两个连接事件，分别是：
  • offline：当浏览器断网并且 Navigator.onLine 属性的值变为 false 时会触发
  • online：当浏览器连接网络并且 Navigator.onLine 属性的值变为true时触发
// 离线事件（方式1）window.addEventListener('offline', (event) => {console.log("The.NETwork connection has been lost.");});// 离线事件（方式2）window.onoffline = (event) => {console.log("The network connection has been lost.");};除了这两个事件之外，还将使用 Window 对象的load事件，该事件在浏览器窗口完全加载时触发 。
2.检查用户是否离线/在线示例使用 Navigator.onLine 属性来检查用户是否在线，在 JavaScript 中定义事件处理函数来处理 Window 对象的离线和在线事件，以监控用户是否断网 。
<!doctype html> <head><style>body {padding:10px;font-family:arial;font-size:1.2em;}.error {background-color:#ff5252;color:white;padding:10px;border-radius:5px;margin-top:10px;}.success {background-color:#00e676;color:white;padding:10px;border-radius:5px;margin-top:10px;}</style><title>判断用户在线或者离线</title> </head> <body><h2>Welcome to Studytonight!</h2><p>This is a simple code example to show you how to find when a user goes offline and when the user comes back online to show some messages to the user when this hAppens.</p><div id="status"></div><script>let status = document.getElementById("status");// 监听load事件window.addEventListener('load', function(e) {if (navigator.onLine) {status.innerHTML = "User is online";status.classList.add("success");} else {status.innerHTML = "User is offline";status.classList.remove("success");status.classList.add("error");}}, false);// 监听online事件window.addEventListener('online', function(e) {status.innerHTML = "User is back online";status.classList.remove("error");status.classList.add("success");}, false);// 监听offline事件window.addEventListener('offline', function(e) {status.innerHTML = "User went offline";status.classList.remove("success");status.classList.add("error");}, false);</script> </body></html>3.部分浏览器hack值得注意的是，window.navigator.onLine 属性及其相关事件目前在某些 Web 浏览器（尤其是 Firefox 桌面）上不可靠，下面使用jQuery定期检查网络连接状态 。
// Global variable somewhere in your app to replicate the // window.navigator.onLine variable (this last is not modifiable). It prevents// the offline and online events to be triggered if the network// connectivity is not changedvar IS_ONLINE = true;function checkNetwork() {$.ajax({// Empty file in the root of your public vhosturl: '/networkcheck.txt',// We don't need to fetch the content (I think this can lower// the server's resources needed to send the HTTP response a bit)type: 'HEAD',cache: false,// Needed for HEAD HTTP requeststimeout: 2000,// 2 secondssuccess: function() {if (!IS_ONLINE) { // If we were offlineIS_ONLINE = true; // We are now online$(window).trigger('online'); // Raise the online event}},error: function(jqXHR) {if (jqXHR.status == 0 && IS_ONLINE) {// We were online and there is no more network connectionIS_ONLINE = false; // We are now offline$(window).trigger('offline'); // Raise the offline event} else if (jqXHR.status != 0 && !IS_ONLINE) {// All other errors (404, 500, etc) means that the server responded,// which means that there are network connectivityIS_ONLINE = true; // We are now online$(window).trigger('online'); // Raise the online event}}});}


推荐阅读


上一篇：你必须知道的常用的足够简练的 11 个 Python代码

下一篇：七个对 Web 开发人员有用的资源