CODEWITHSUNDEEP
javascriptinternet-explorer-8tabs
Martin Bencik
Martin Bencik

Reputation: 131

Is there any way to detect that window is currently active in IE8?

Is there any way to detect that the window is currently active (is being shown on active tab/window) in IE8?

I know there are events like onfocusin/onfocus - but this is not a perfect solution, since the window must also receive focus for the event to be fired - so this does not work when the user just switches the tabs without touching the window itself.

I believe there has to be some simple, elegant solution for such ordinary use-case.

Upvotes: 13

Views: 11276

Answers (7)

Al Sayeed
Al Sayeed

Reputation: 65

To check window is currently active or not use:

document.hasFocus();

It will return true if window is currently active, otherwise false.

To check window is currently visible or not use:

document.visibilityState;

It has two state, visible and invisible.

Upvotes: 0

Silver Ringvee
Silver Ringvee

Reputation: 5535

Using the browser default Page Visibility API.

function isPageHidden(){
    if (typeof(document.hidden) === 'boolean') return document.hidden;
    if (typeof(document.msHidden) === 'boolean') return document.msHidden;
    if (typeof(document.webkitHidden) === 'boolean') return document.webkitHidden;
    if (typeof(document.mozHidden) === 'boolean') return document.mozHidden;
    else return undefined;
}

Upvotes: 2

Hauke
Hauke

Reputation: 471

document.addEventListener("visibilitychange", () => { 
    if (document.visibilityState === 'visible') alert("Hello again"); 
});

See Page Visibility API on MDN for more information.

Upvotes: 2

user2667398
user2667398

Reputation: 

<script>

    // Adapted slightly from Sam Dutton
    // Set name of hidden property and visibility change event
    // since some browsers only offer vendor-prefixed support
    var hidden, state, visibilityChange; 
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
    }
    // Add a listener that constantly changes the title
    document.addEventListener(visibilityChange, function() {
        document.title = document[state];
    }, false);

    // Set the initial value
    document.title = document[state];

</script>

Upvotes: 0

Mathias Bynens
Mathias Bynens

Reputation: 149554

I’ve written a jQuery plugin that does this: http://mths.be/visibility It gives you a very simple API that allows you to execute callbacks when the page’s visibility state changes.

It does so by using the the Page Visibility API where it’s supported, and falling back to good old focus and blur in older browsers.

Demo: http://mathiasbynens.be/demo/jquery-visibility

This plugin simply provides two custom events for you to use: show and hide. When the page visibility state changes, the appropriate event will be triggered.

You can use them separately:

$(document).on('show', function() {
  // the page gained visibility
});

…and…

$(document).on('hide', function() {
  // the page was hidden
});

Since most of the time you’ll need both events, your best option is to use an events map. This way, you can bind both event handlers in one go:

$(document).on({
  'show': function() {
    console.log('The page gained visibility; the `show` event was triggered.');
  },
  'hide': function() {
    console.log('The page lost visibility; the `hide` event was triggered.');
  }
});

The plugin will detect if the Page Visibility API is natively supported in the browser or not, and expose this information as a boolean (true/false) in $.support.pageVisibility:

if ($.support.pageVisibility) {
  // Page Visibility is natively supported in this browser
}

Upvotes: 17

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175


var isActive = false;
function onBlur() {
    isActive = false;
};
function onFocus(){
    isActive = true;
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}

Upvotes: 2

Zar
Zar

Reputation: 6882

This is a simple task to achieve using jQuery:

$(function() {
    window.isActive = true;
    $(window).focus(function() { this.isActive = true; });
    $(window).blur(function() { this.isActive = false; });
});

The global isActive variable determines wether the tab/window is acive.

Upvotes: 0

Related Questions