检查mobile是否在线

在PhoneGap应用，或者黑莓Java/HTML混搭应用中，如何使用JavaScript检查Mobile App网络连接状态呢？

 

<script type="text/javascript">
  if (navigator.onLine) {
      alert("online");
  } else {
      alert("offline");
  }
</script>

 

jQuery Mobile中显示online/offline状态

 

<div data-role="content">
    <button id="home_network_button" data-icon="check">Internet Access Enabled</button>
  </div>

  <script type="text/javascript">
     if (navigator.onLine) {
      } else {
        $("#home_network_button").text('No Internet Access')
         .attr("data-icon", "delete")
         .button('refresh');
      }
  </script>
</div>

 

 

 开发离线应用的第一步是要知道设备是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性值为true表示设备能上网，值为false表示设备离线。这个属性的关键是浏览器必须知道设备能否访问网络，从而返回正确的只。实际应用中，navagator.online在不同的浏览器间还有写小的差异。

IE6+和Safari 5+能够正确检测到网络已断开，并将navigator.onLine的值转换为false。

Firefox 3+和Opear 10.6+支持navigator.onLine属性，但你必须手工选中菜单项“文件-Web开发人员（设置）-脱机工作”才能让浏览器正常的工作。

Chrome 11及之前版本始终将navigator.onLine属性设置为true。这是一个待修复的bug。

由于存在上述兼容性的问题，单独使用navigator.onLine属性不能确定网络是否连通。即便如此，在请求发生错误的情况下，检测这个属性仍然是瓜农的。以下是检测该属性状态的示例。

if(navigator.onLine){
    //正常工作}
else{
    //执行离线状态时的任务
}

除navigator.onLine属性之外，为了更好地确定网络是否可用，HTML5还定义了两个事件：online和offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。这两个事件在window对象上触发。

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};

EventUtil.addHandler(window, "online", function () {
    alert("Online");
});
EventUtil.addHandler(window, "offline", function () {
    alert("Offline");
});

 

为了检测应用是否离线，在页面加载后，最好先通过navigator.onLine取得初始的状态。然后，就是通过上述两个事件来确定网络连接状态是否变化。当上述事件触发式，navigator.onLine属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。

支持离线检测的浏览器有IE6+(只支持navigator.onLine属性)、Firefox3、Safari4、Opera 10.6、Chrome、iOS 3.2版Safari和Android版WebKit。

参考：

navigator.onLine 离线检测 

http://mobile.tutsplus.com/tutorials/phonegap/build-an-exercise-tracking-app-geolocation-tracking/