如何在没有互联网连接的情况下使用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>
输出:
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>
输出:
没有可用的连接