onLine : Démo HTML5
Mise à jour : 2017-01-22
L'état de la connexion peut être interrogé,
et son changement de statut détecté.
onLine
Attribut de "window.navigator" qui retourne le statut de connexion.
ononline/onoffline
Attributs de <body>.
- onoffline : appelé lorsque la connexion est perdue.
- ononline : appelé lorsque la connexion est établie.
Notes sur le tuto
- Seuls Chrome et IE détectent une déconnexion physique.
- Limitations :
- Contrairement à Edge, IE n'envoit aucun évènement à <body> et "window", sauf dans le cas de l'utilisation du menu "Travailler hors connexion". IE8 n'envoit l'évènement qu'à <body>, et accepte la notation [document.body.ononline=function()] en parallèle de [document.body.setAttribute("ononline", function())].
- Firefox et Opera ne détectent qu'une déconnexion obtenue en utilisant le menu "Travailler hors connexion" (Opera n'envoit l'évènement qu'à "window").
- Voir aussi manifest.
Exemple de code HTML5
Statut de connexion : <span id="status"></span><br> <br> Évènement reçu par <body> : <span id="body"></span><br> <br> Évènement reçu par "window" : <span id="window"></span><br> <script> dot = false function update() { dot = ! dot elt = document.getElementById("status") elt.innerHTML = (navigator.onLine ? "En ligne" : "Hors ligne") + (dot?".":"") elt.className = (navigator.onLine ? "ok" : "ko") } setInterval("update()", 500) bdy = document.getElementById("body") document.body.setAttribute("ononline", "bdy.innerHTML = \"online\"") document.body.setAttribute("onoffline", "bdy.innerHTML = \"offline\"") win = document.getElementById("window") if (!window.addEventListener) // IE window.addEventListener = function (evt, func, capt) {attachEvent("on"+evt, func)} addEventListener("online", function(){win.innerHTML="online"}, false) addEventListener("offline",function(){win.innerHTML="offline"}, false) </script>
Démonstration du résultat HTML5
Statut de connexion :
Évènement reçu par <body> :
Évènement reçu par "window" :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isItemSupported("navigator.onLine") isAttributeSupported("body", "ononline") isAttributeSupported("body", "onoffline") </script>