如何在没有互联网连接的情况下使用jQuery获得一个对话框

在这篇文章中，我们将看到如何使用jQuery来检查互联网连接。我们将使用navigator.onLine，如果有互联网连接，它将返回true，否则它将返回false。

语法:

navigator.onLine

返回值:

true：如果互联网连接是可用的。
false。如果互联网连接不可用。

例子1：这个例子将检查互联网连接是否可用，并在点击按钮时显示一个警报框。

<!DOCTYPE html>
<html>
  <head>
    <!--Including JQuery-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      (document).ready(function () {
        // Function to be called on button click
        ("button").click(function () {
  
          // Detecting the internet connection
          var online = navigator.onLine; 
          if (online) {
  
            // Showing alert when connection is available
            $("#message").show().html("Connected!");
          } else {
  
            // Showing alert when connection is not available
            alert("No connection available");
          }
        });
      });
    </script>
  </head>
  <body>
    <p>
      Click the button below to check 
      your internet connection.
    </p>
  
    <button>Check connection</button>
    <div style="height: 10px"></div>
    <div id="message"></div>
  </body>
</html>

输出:

如何在没有互联网连接的情况下使用jQuery获得一个对话框？

Check connection

例子2 。这个例子每隔3秒就会自动检查是否有互联网连接。如果没有互联网连接，它将显示一个警报。

<!DOCTYPE html>
<html>
  <head>
    <!--Including JQuery-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script>
  
      // Function to check internet connection
      function checkInternetConnection() {
  
        // Detecting the internet connection
        var online = navigator.onLine;
        if (!online) {
  
          // Showing alert when connection is not available
          $("#message").show().html("No connection available");
        }
      }
  
      // Setting interval to 3 seconds
      setInterval(checkInternetConnection, 3000);
    </script>
  </head>
  <body>
    <p>
      It will automatically check for internet
      connection after every 3 seconds.
    </p>
  
    <div style="height: 10px"></div>
    <div id="message"></div>
  </body>
</html>