參考對面的JavaScript事件偵聽器對象

所以我寫了一個API，允許不同的應用程序來處理在線/離線檢測：參考對面的JavaScript事件偵聽器對象

function onOffAPI() { 

    var connection; 

    function init() { 
     var onLoadStatus = window.navigator.onLine; 

     window.addEventListener('online', function() { 
      connection.status = true; 
     }, false); 

     window.addEventListener('offline', function() { 
      connection.status = false; 
     }, false); 

     return { 
      status: onLoadStatus 
     }; 
    } 

    return { 
     getStatus: function() { 
      if (!connection) { 
       connection = init(); 
      } 
      return connection; 
     } 
    }; 
}

所以一個示例應用程序使用下面的代碼來檢測每當應用程序在線或離線：

var $alert = $('.alert'); 
var notification = new onOffAPI(); 
var networkStatus = notification.getStatus().status; 

$alert.text('Online: ' + notification.getStatus().status); //returns true if online, false if offline

如果能夠參考API時加載應用程序很簡單，但我很困惑，如何引用事件監聽器每當網絡連接被突然從網上更改爲脫機，或副VERS一個。有人可以幫我在這裏嗎？

來源

2015-02-11 kdex86

你不應該在你的onOffAPI（）函數中使用'new'，因爲它返回一個值而不是分配給'this'。 – 2015-02-11 22:51:09

我可以看到你想要做什麼，但我認爲你會以錯誤的方式去做。你真正想要的是重新公開在線和離線事件作爲一個新的'connectionStatus'事件。你目前所擁有的將需要你對api的狀態進行輪詢，而你真的希望它是事件驅動的。

它看起來像你使用jQuery，所以我希望你不介意我在這個例子中使用jQuery。以下有兩種通知狀態的方法。一種方法是使用jQuery回調，另一方面是揭露一個新的事件「connectionStatus」：

var apiOnlineOffline = (function() { 
    var callbacks = $.Callbacks('unique memory'), 
     eventName = 'connectionStatus'; 

    function setStatus(status) { 
     $(window).trigger(eventName, status); 
     callbacks.fire(status); 
    } 

    function addCallback(callback) { 
     callbacks.add(callback); 
    } 

    return { 
     init: function() { 
      // document.body #becauseIE8 
      document.body.addEventListener('online', function() { 
       setStatus(true); 
      }); 
      document.body.addEventListener('offline', function() { 
       setStatus(false); 
      }) 

      // Set the initial status; assume true for browsers that don't support onLine property. 
      setStatus(window.navigator.onLine || true) 
     }, 

     addCallback: addCallback 
    }; 
}());

用法：

<p> 
    Current connection status (event): <span id="statusEvent"></span> 
</p> 

<p> 
    Current connection status (callback): <span id="statusCallback"></span> 
</p> 

<script type="text/javascript"> 
    $(function() { 
     // Using events. 
     $(window).on('connectionStatus', function (event, online) { 
      $('#statusEvent').text(online.toString()); 
     }); 

     // Using callbacks. 
     apiOnlineOffline.addCallback(function (online) { 
      $('#statusCallback').text(online.toString()); 
     }) 

     // Note; this must appear last or the event version won't work. 
     apiOnlineOffline.init(); 
    }); 
</script>

希望這有助於。

參考：caniuse.com article for online-offline。

來源

2015-02-12 00:17:23 Paul

感謝您的建議保羅，它的作品！ – kdex86 2015-02-12 14:09:05

參考對面的JavaScript事件偵聽器對象

回答

相關問題