如何在jQuery Mobile中检测设备的互联网连接 [英] How to detect device's internet connection in jQuery Mobile

问题描述

我正在使用HTML5，CSS3，jQuery Mobile，jQuery UI，ASP.NET，C#和一些jQuery插件创建一个用于调查的简单移动网页.要求之一是显示一个弹出/对话框(JavaScript警报或jQuery移动对话框，或者如果是jQuery UI对话框则更好)，当设备没有互联网连接时(特别是Android)，它将通知用户.目前，我有以下代码:

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:

<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>

然后将JavaScript函数放在表单的onsubmit事件上:

then I put the JavaScript function on the form's onsubmit event:

<form id="frmSurvey" runat="server" class="validate" onsubmit="checkInternet()">

当我在台式机/PC浏览器上查看它时，它可以工作，但在移动设备上却根本不起作用. jQuery Mobile错误加载页面.

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.

因为，这不是我调整jQuery Mobile文件的要求，它注释掉了错误加载页面消息部分，并且不再显示了.我已经尝试了Google-ing很多搜索任何相关主题，但没有找到任何相关主题.

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.

我真的很难做到这一点.请帮助我！

I'm really having a hard time making this possible. Please help me guys!

提前谢谢！

推荐答案

很少有满足您需求的解决方案.

There are few solutions that will suite your need.

此解决方案需要jQuery，并且因为您使用的是jQuery Mobile，所以它会很吸引人.

This solution requires jQuery and because you are using jQuery Mobile it will work as a charm.

$.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!");
    }
});

有关更多信息，请查看有关 ajaxSetup 的官方文档 .

For more info take a look at this official documentation about ajaxSetup.

这有点棘手，因为它取决于HTML5浏览器的实现.

This one is little bit tricky because it depends on HTML5 browser implementation.

基本上，您需要检查此值是true还是false:

Basically you need to check if this value is true or false:

window.navigator.onLine －如果用户离线，则为 false .

工作示例: http://jsfiddle.net/Gajotres/VXWGG/1/

测试于:

• Windows Firefox

• Windows Firefox

Windows Google Chrome

Windows Google Chrome

Windows IE9和IE10

Windows IE9 and IE10

Android 4.1.1 Chrome

Android 4.1.1 Chrome

iPad 3 Safari

iPad 3 Safari

iPad3 Chrome

iPad3 Chrome

这篇关于如何在jQuery Mobile中检测设备的互联网连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！