54 lines
1.3 KiB
HTML
54 lines
1.3 KiB
HTML
|
<title>on/offline event capture</title>
|
||
|
|
<style>
|
||
|
|
li {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
li::before {
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
#viabody::before {
|
||
|
|
content: 'via body "on" events: ';
|
||
|
|
}
|
||
|
|
#viaon::before {
|
||
|
|
content: 'via window "on" events: ';
|
||
|
|
}
|
||
|
|
#vialistener::before {
|
||
|
|
content: 'via window.addEventListener: ';
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
<li id="viabody"></li>
|
||
|
|
<li id="vialistener"></li>
|
||
|
|
<li id="viaon"></li>
|
||
|
|
</ul>
|
||
|
|
<p>Note that the test shows </p>
|
||
|
|
</article>
|
||
|
|
<script>
|
||
|
|
function update(online) {
|
||
|
|
document.getElementById('viabody').innerHTML = navigator.onLine ? 'Online' : 'Offline';
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('online', function () {
|
||
|
|
document.getElementById('vialistener').innerHTML = 'Online';
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
window.addEventListener('offline', function () {
|
||
|
|
document.getElementById('vialistener').innerHTML = 'Offline';
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
window.ononline = function () {
|
||
|
|
document.getElementById('viaon').innerHTML = 'Online';
|
||
|
|
};
|
||
|
|
|
||
|
|
window.onoffline = function () {
|
||
|
|
document.getElementById('viaon').innerHTML = 'Offline';
|
||
|
|
};
|
||
|
|
|
||
|
|
document.body.onOnline = update;
|
||
|
|
document.body.onOffline = update;
|
||
|
|
|
||
|
|
document.body.onload = update;
|
||
|
|
|
||
|
|
</script>
|