onlinehandler.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2008 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <!--
  9. Author: arv@google.com (Erik Arvidsson)
  10. -->
  11. <head>
  12. <title>goog.net.OnlineHandler</title>
  13. <script src="../base.js"></script>
  14. <script>
  15. goog.require('goog.events');
  16. goog.require('goog.events.OnlineHandler');
  17. goog.require('goog.net.NetworkStatusMonitor');
  18. </script>
  19. <style>
  20. body {
  21. width: 30em;
  22. margin: 1em auto;
  23. text-align: justify;
  24. font: small sans-serif;
  25. }
  26. #out.online {
  27. border: 1px solid green;
  28. background: lightgreen;
  29. }
  30. #out.offline {
  31. border: 1px solid red;
  32. background: pink;
  33. }
  34. p {
  35. padding: 0.2em;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <p>This page reports whether your browser is online or offline. It will detect
  41. changes to the reported state and fire events when this changes. The
  42. OnlineHandler acts as a wrapper around the HTML5 events <code>online</code> and
  43. <code>offline</code> and emulates these for older browsers.</p>
  44. <p>Try changing <strong>File -> Work Offline</strong> in your browser.</p>
  45. <p id=out></p>
  46. <script>
  47. var out = document.getElementById('out');
  48. var oh = new goog.events.OnlineHandler;
  49. function updateText() {
  50. out.innerHTML = 'Is online: ' + oh.isOnline();
  51. out.className = oh.isOnline() ? 'online' : 'offline';
  52. }
  53. goog.events.listen(oh, [goog.net.NetworkStatusMonitor.EventType.ONLINE,
  54. goog.net.NetworkStatusMonitor.EventType.OFFLINE],
  55. updateText);
  56. goog.events.listen(window, 'unload', function() {
  57. oh.dispose();
  58. });
  59. updateText();
  60. </script>
  61. </body>
  62. </html>