How to detect when a tab is focused or not in Chrome with Javascript?

by

2015 update: The new HTML5 way with visibility API (taken from Blowsie’s comment):

document.addEventListener('visibilitychange', function(){
    document.title = document.hidden; // change tab text for demo
})

The code the original poster gives (in the question) now works, as of 2011:

window.addEventListener('focus', function() {
    document.title="focused";
});

window.addEventListener('blur', function() {
    document.title="not focused";
});

edit: As of a few months later in Chrome 14, this will still work, but the user must have interacted with the page by clicking anywhere in the window at least once. Merely scrolling and such is insufficient to make this work. Doing window.focus() does not make this work automatically either. If anyone knows of a workaround, please mention.

More Related Contents:

  1. JavaScript: How to find out if the user browser is Chrome?
  2. Chrome 65 blocks cross-origin . Client-side workaround to force download?
  3. How to simulate key presses or a click with JavaScript?
  4. Cross-origin data in HTML5 canvas
  5. JavaScript: Is there a way to get Chrome to break on all errors?
  6. clear javascript console in Google Chrome
  7. Can a site invoke a browser extension?
  8. How do you use window.postMessage across domains?
  9. Create a file using Javascript in Chrome on client side
  10. Chrome can’t load web worker
  11. Unsafe JavaScript attempt to access frame in Google Chrome
  12. AJAX request to local file system not working in Chrome? [duplicate]
  13. Connecting to DB from a Chrome Extension?
  14. Event onBrowserClose for Google Chrome Extension?
  15. Console shows error about Content Security policy and lots of failed GET requests
  16. Chrome sets cursor to text while dragging, why?
  17. Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn’t work in Chrome)?
  18. Defer Attribute (Chrome)
  19. How to inject CSS into webpage through Chrome extension?
  20. Proper way to reset a GIF animation with display:none on Chrome
  21. jQuery in Chrome returns “block” instead of “inline”
  22. forEach method of Node.childNodes?
  23. Does chrome supports document.selection?
  24. Popstate on page’s load in Chrome
  25. Re-enabling window.alert in Chrome
  26. iframe not reading cookies in Chrome
  27. Keycode is always zero in Chrome for Android
  28. Disable chrome react DevTools for production
  29. Record voice from IPhone using HTML5
  30. How to use “segments” mode at SourceBuffer of MediaSource to render same result at Chomium, Chorme and Firefox?

Leave a Comment