2010-03-04 16:09:30 +01:00
< title > on/offline event capture< / title >
< style >
li {
font-weight: bold;
}
li::before {
font-weight: normal;
}
< / style >
< article >
< p > Test required here: File -> Work Offline - toggle the value and there < em > should< / em > be three list items notifying of online and offline.< / p >
< ul >
2010-03-20 20:31:14 +01:00
< li > via body "on" events: < span id = "viabody" > < / span > < / li >
2010-08-18 15:23:14 +02:00
< li > via window "on" events: < span id = "viaon" > < / span > < / li >
< li > via window.addEventListener: < span id = "vialistener" > < / span > < / li >
2010-03-04 16:09:30 +01:00
< / ul >
2010-03-04 16:10:20 +01:00
< p > Note that the test shows that < code > window.ononline< / code > and < code > window.onoffline< / code > doesn't work (which I thought I had read in the specs somewhere...).< / p >
2010-03-04 16:09:30 +01:00
< / article >
< script >
2010-03-20 20:20:28 +01:00
function update(online) {
document.getElementById('viabody').innerHTML = navigator.onLine ? 'Online' : 'Offline';
}
2010-03-04 16:09:30 +01:00
2010-03-20 20:20:28 +01:00
addEvent(window, 'online', function () {
document.getElementById('vialistener').innerHTML = 'Online';
});
addEvent(window, 'offline', function () {
document.getElementById('vialistener').innerHTML = 'Offline';
});
window.ononline = function () {
document.getElementById('viaon').innerHTML = 'Online';
};
window.onoffline = function () {
document.getElementById('viaon').innerHTML = 'Offline';
};
document.body.onOnline = update;
document.body.onOffline = update;
2010-03-20 20:31:14 +01:00
// document.body.onload = update;
2010-03-04 16:09:30 +01:00
< / script >