mirror of
https://github.com/Erreur32/html5demos.git
synced 2024-09-28 00:41:30 +02:00
New demo to demonstrate on and offline events and expose bugs in browsers.
This commit is contained in:
parent
aa09c506a6
commit
77eed67ea5
54
demos/offline-events.html
Normal file
54
demos/offline-events.html
Normal file
@ -0,0 +1,54 @@
|
||||
<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>
|
@ -1,18 +1,19 @@
|
||||
<title>Online connectivity monitoring</title>
|
||||
<article>
|
||||
<p>Current network status: <span id="status">checking...</span></p>
|
||||
<ol id="state"></ol>
|
||||
</article>
|
||||
<script>
|
||||
function online() {
|
||||
var status = document.querySelector('#status');
|
||||
if (status) {
|
||||
status.className = navigator.onLine ? 'online' : 'offline';
|
||||
status.innerHTML = navigator.onLine ? 'online' : 'offline';
|
||||
}
|
||||
var status = document.getElementById('status'),
|
||||
state = document.getElementById('state');
|
||||
|
||||
function online(event) {
|
||||
status.className = navigator.onLine ? 'online' : 'offline';
|
||||
status.innerHTML = navigator.onLine ? 'online' : 'offline';
|
||||
state.innerHTML += '<li>New event: ' + event.type + '</li>';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', online, true);
|
||||
window.addEventListener('online', online, true);
|
||||
window.addEventListener('offline', online, true);
|
||||
|
||||
addEvent(window, 'online', online);
|
||||
addEvent(window, 'offline', online);
|
||||
online({ type: 'ready' });
|
||||
</script>
|
@ -26,6 +26,7 @@
|
||||
<li><a href="drag">drag and drop</a> (IE, Safari 4, FF3.5)</li>
|
||||
<li><a href="drag-anything">drag <em>anything</em></a> (IE, Safari 4, FF3.5)</li>
|
||||
<li><a href="offline">offline detection</a> (FF3.5, iPhone OS 3)</li>
|
||||
<li><a href="offline-events">on/offline event tests</a> (Opera, Firefox - requires "Work Offline")</li>
|
||||
<li><a href="offlineapp">offline application using the manifest</a> (Safari 4, FF3.5.3) (<em>Note: pre-FF3.5.3 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501422">has a bug</a></em>)</li>
|
||||
<li><a href="storage">Storage</a> (all latest browsers)</li>
|
||||
<li><a href="database">Web SQL Database Storage</a> (Safari, iPhone OS 3, Opera 10.50)</li>
|
||||
|
Loading…
Reference in New Issue
Block a user