使用 JavaScript 检查互联网连接答案

【问题标题】：Checking internet connection using JavaScript使用 JavaScript 检查互联网连接
【发布时间】：2014-10-10 06:52:50
【问题描述】：

问题

我想在 WiFi 关闭时显示警报 [即没有网络连接]。在我的网页中，我有许多按钮、弹出窗口等。用户可以在离线时单击任何内容。但我想显示 API 调用是否失败。我可以在每次点击时检查navigator.onLine。但我不想写函数调用或行数。有什么办法可以用jQuery、JS、Ajax来做吗？

“由于用户操作导致呼叫失败时应显示ALERT”

喜欢$.ajax 有错误。它不应与任何 div/page 绑定。

您好，我已尝试以下方法：

navigator.onLine  // It works fine

我使用了下面提到的一个。但它不起作用。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

我引用的链接

Detect that the Internet connection is offline?

Check Internet connectivity with jquery

还有更多。

有什么建议吗？

【问题讨论】：

你知道如何编写服务器端请求处理程序吗？如果是，那么您可以对其进行 ajax 调用并检查请求以查看是否有任何连接错误，如果没有发现错误，则连接正常。然后，您必须有一个计时器来使这些请求每分钟左右说一次，间隔越短，您越早发现连接断开时，但是发送太多，您将陷入服务器。使用请求处理程序而不是整页的原因是让您的服务器做尽可能少的工作来响应您的“ping”
另一个选项，如果你只针对相当现代的浏览器，那可能的工作（我从未尝试过）是使用 websockets。他们应该（以与常规“桌面套接字”相同的方式）能够告诉您何时失去与您的服务器的连接。您要做的是让您的页面通过 websocket 连接到您的服务器，并保持该连接处于活动状态，只要连接仍然存在，您就“连接”到您的服务器。如果连接丢失，则重试连接，如果连接失败，则表示离线，请继续重试，直到再次连接，这意味着您再次在线

标签： javascript jquery ajax

【解决方案1】：

navigator.online 检查是否有网络并且不检查互联网。如果您连接到没有互联网的网络，它仍然会返回 true

您可以使用对您的域的 ajax 请求进行检查

setInterval(function() {
  $.ajax({
    type: "HEAD",
    url: document.location.pathname + "?param=" + new Date(),
    error: function() {
      console.log(false);
    },
    success: function() {
      console.log(true);
    }
  });
}, 1000);

【讨论】：

【解决方案2】：

您可以在这里使用原生的setInterval 函数。例如，在您的 document.ready 函数中，或者在页面加载时提前加载的其他地方，使用设置的时间间隔：

setInterval(callbackFunction:,1000/*<--run function every interval in ms*/);

并编写您的回调函数（可能在setInteraval 上方）类似：

var callbackFunction = function(){
  if (navigator.online){
    //manipulate the DOM 
  }
};

如果您操作 DOM，请记住将其放入 document.ready() 函数中，并且如果在 setInterval() 调用之外定义回调函数，则可能应该首先声明。

【讨论】：

我试过了。它工作正常。但我只想在用户触发事件时调用该函数。
@GopsAB 将其放在onclick 或onchange 事件处理程序中，然后
建议的解决方案对我不起作用，直到我将其更改为 navigator.onLine（注意大写 L，粗心的陷阱）

【解决方案3】：

我找到了检查是否存在与 YouTube 的连接（例如）的最简单方法 - 从该站点加载一些 javascript 库并检查它是否正确加载：

示例库的异步加载（可能在您文档的脚本标签中）：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

该脚本小于 1kB。当您需要在 javascript 中检查它时，请使用以下命令：

if (window.YT) 
   ...

【讨论】：