javascript 如何在 jQuery Mobile 中检测设备的互联网连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16365792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect device's internet connection in jQuery Mobile
提问by joecoder
I am creating this simple mobile web page for a survey using HTML5, CSS3, jQuery Mobile, jQuery UI, ASP.NET, C# and some jQuery Plugins. One of the requirements is to show a pop-up/ dialog (either javascript alert or a jQuery mobile dialog or much better if it's a jQuery UI dialog) that will notify user whenever there is no internet connection the device (specifically Android). Currently I have this code:
我正在为使用 HTML5、CSS3、jQuery Mobile、jQuery UI、ASP.NET、C# 和一些 jQuery 插件的调查创建这个简单的移动网页。要求之一是显示一个弹出/对话框（javascript 警报或 jQuery 移动对话框，如果是 jQuery UI 对话框则更好），只要设备（特别是 Android）没有互联网连接，它就会通知用户。目前我有这个代码：
<link rel="stylesheet" href="../Scripts/jqueryui/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="../Scripts/jquery.mobile-1.1.0.css" />
<script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
var online = window.navigator.onLine;
if (!online) {
alert('Please check your internet connection and try again.');
}
function checkInternet() {
var online = window.navigator.onLine;
if (!online) {
alert('Please check your internet connection and try again.');
}
}
</script>
then I put the JavaScript function on the form's onsubmit event:
然后我将 JavaScript 函数放在表单的 onsubmit 事件上：
<form id="frmSurvey" runat="server" class="validate" onsubmit="checkInternet()">
It's working when I view it on a desktop/ PC browser but doesn't work on mobile at all. The jQuery Mobile error loading page.
当我在台式机/PC 浏览器上查看它时它可以工作，但在移动设备上根本不工作。jQuery Mobile 错误加载页面。
Since, this ain't the requirment I tweaked the jQuery Mobile file commented out the error loading page message part and it doesn't appear anymore. I've tried Google-ing a lot searching for any related topics but not found any.
因为，这不是我调整 jQuery Mobile 文件的要求，注释掉了错误加载页面消息部分，它不再出现。我试过用谷歌搜索任何相关主题，但没有找到任何相关主题。
I'm really having a hard time making this possible. Please help me guys!
我真的很难让这成为可能。请帮帮我伙计们！
Thanks in advance!
提前致谢！
回答by Gajotres
There are few solutions that will suite your need.
很少有解决方案可以满足您的需求。
Solution 1
方案一
This solution requires jQuery and because you are using jQuery Mobile it will work as a charm.
此解决方案需要 jQuery，并且因为您使用的是 jQuery Mobile，所以它会起到很好的作用。
$.ajaxSetup({
timeout: 1, // Microseconds, for the laughs. Guaranteed timeout.
error: function(request, status, maybe_an_exception_object) {
if(status == 'timeout')
alert("Internet connection is down!");
}
});
For more info take a look at this official documentation about ajaxSetup.
有关更多信息，请查看有关ajaxSetup 的官方文档。
Solution 2
解决方案2
This one is little bit tricky because it depends on HTML5 browser implementation.
这个有点棘手，因为它取决于 HTML5 浏览器的实现。
Basically you need to check if this value is true or false:
基本上你需要检查这个值是真还是假：
window.navigator.onLine -- it will be falseif the user is offline.
window.navigator.onLine --如果用户离线，它将是假的。
Working example: http://jsfiddle.net/Gajotres/VXWGG/1/
工作示例：http: //jsfiddle.net/Gajotres/VXWGG/1/
Tested on:
测试：
Windows Firefox
Windows Google Chrome
Windows IE9 and IE10
Android 4.1.1 Chrome
iPad 3 Safari
iPad3 Chrome
火狐浏览器
视窗谷歌浏览器
视窗 IE9 和 IE10
安卓 4.1.1 铬
iPad 3 Safari
iPad3 铬
