Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS 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>.

Notes sur le tuto


Exemple de code HTML5

Statut de connexion :
<span id="status"></span><br>
<br>
Évènement reçu par &lt;body&gt; :
<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>		

Can I Use online-status? Data on support for the online-status feature across the major browsers from caniuse.com.