检查internet连接并更改内容jquery/Javascript
这一切都发生在页面加载时，无需单击事件调用：- 这里是更新的代码，在这里我试图检查互联网连接是否打开。如果连接已关闭，则上的“链接”将自动禁用（不可单击），并且颜色将变为红色 如果连接关闭，“链接”将自动启用（可单击），颜色将变为绿色。然而，我遗漏了一些东西： 代码：检查internet连接并更改内容jquery/Javascript,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,这一切都发生在页面加载时，无需单击事件调用：- 这里是更新的代码，在这里我试图检查互联网连接是否打开。如果连接已关闭，则上的“链接”将自动禁用（不可单击），并且颜色将变为红色 如果连接关闭，“链接”将自动启用（可单击），颜色将变为绿色。然而，我遗漏了一些东西： 代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<style>
.connected{ background-color:green;}
.diconnected{background-color:red;}
#link1{
width: 100px;
height: 200px;
border: #0FF 1px solid;
}
</style>
<body>
<a href="#" id="link1"><img src="images/network.png"> My status</a>
</body>
<script>
window.onload=function() {
var tId = setInterval(function() {
document.getElementById("link1").disabled=!navigator.onLine;
},500);
if (navigator.onLine) {
$("link1").bind('click', true).addClass('connected').removeclass('diconnected');
} else {
$('.link1').unbind('click', false);
$(".link1").bind('click', true).addClass('diconnected').removeclass('diconnected');
}
}
</script>
</html>
.connected{背景色：绿色；}
.diconnected{背景色：红色；}
#链接1{
宽度：100px；
高度：200px；
边框：#0FF 1px实心；
}
window.onload=function（）{
var tId=setInterval（函数（）{
document.getElementById（“link1”）.disabled=！navigator.onLine；
},500);
if（navigator.onLine）{
$（“link1”）.bind（'click'，true.）.addClass（'connected'）.removeclass（'diconnected'）；
}否则{
$（'.link1'）。取消绑定（'click'，false）；
$（.link1”）.bind（'click'，true.）.addClass（'diconnected'）.removeclass（'diconnected'）；
}
}
谢谢您的帮助。您可以在关闭body tag=>
<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>
window.jQuery | | document.write（“”）
function hostReachable() {
// Handle IE and more capable browsers
var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
// Open new request as a HEAD to the root hostname with a random param to bust the cache
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
// Issue request and handle response
try {
xhr.send();
return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
} catch (error) {
return false;
}
}
函数hostReachable（）{
//处理IE和更强大的浏览器
var xhr=new（window.ActiveXObject | | XMLHttpRequest）（“Microsoft.XMLHTTP”）；
var状态；
//使用随机参数将新请求作为根主机名的头打开，以破坏缓存
xhr.open（“HEAD”、“/”+window.location.hostname+“/？rand=“+Math.floor（（1+Math.random（））*0x10000），false）；
//发出请求并处理响应
试一试{
xhr.send（）；
返回（xhr.status>=200&&xhr.status<300 | | xhr.status==304）；
}捕获（错误）{
返回false；
}
}
$("link1") // Wrong
$("#link1") // Right
这些需要修改，以便jQuery知道它指向的是正确的东西。您怎么看
。取消绑定（'click'，false）。绑定（'click'，true）