How To Know A Browser Is Minimized In Javascript

Hi i have notification div(divNotify) with some information and a timer in masterpage Protected Sub Timer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer

Solution 1:

Its impossible to find out whether the page is minimized via JavaScript, but you can use Visibility API to determine, whether the page is visible to user or not.

Currently available in Chrome, Mozilla and IE10.

• https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API
• http://code.google.com/chrome/whitepapers/pagevisibility.html
• http://www.nczonline.net/blog/2011/08/09/introduction-to-the-page-visibility-api/

Solution 2:

Additionally to c69's Answer, I would propose the library isVisible. It has utility functions to access the W3C Page visibility API and you do not have to worry about cross browser support (unifies moz- or webkit-prefixed functions)

Solution 3:

maybe check the size of the window? i'm just guessing.

Solution 4:

We will be patient, but visibilityState is coming: W3C defines the visibility state

Solution 5:

The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.

Notes: The Page Visibility API is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.

When the user minimizes the window or switches to another tab, the API sends a visibilitychange event to let listeners know the state of the page has changed. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab. The user doesn't lose their place in the video, the video's soundtrack doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime.

Use cases

Let's consider a few use cases for the Page Visibility API.

1. A site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page
2. An application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible
3. A page wants to detect when it is being prerendered so it can keep accurate count of page views
4. A site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off)

Developers have historically used imperfect proxies to detect this. For example, watching for blur and focus events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. The Page Visibility API addresses this.

Example

View live example (video with sound).

The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:

// Set the name of the hidden property and the change event for visibilityvar hidden, visibilityChange; 
if (typeofdocument.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} elseif (typeofdocument.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} elseif (typeofdocument.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// If the page is hidden, pause the video;// if the page is shown, play the videofunctionhandleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// Warn if the browser doesn't support addEventListener or the Page Visibility APIif (typeofdocument.addEventListener === "undefined" || hidden === undefined) {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // Handle page visibility change   document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
  // When the video pauses, set the title.// This shows the paused
  videoElement.addEventListener("pause", function(){
    document.title = 'Paused';
  }, false);
    
  // When the video plays, set the title.
  videoElement.addEventListener("play", function(){
    document.title = 'Playing'; 
  }, false);

}

Source: MDN: Page Visibility API