How to check if user has left the window

Asked

Viewed 2,277 times

10

I would like to know a way to check if the user left the window of my page with Javascript, for example, if he changes tab (to search something in Google for example) the script changes the title of the window to another title that I set..

javascript
  • 1

    Annoying little problem this, I’ve broken my head enough with this and I’ve come to the conclusion that there is no reliable way crossbrowser to solve. it gets even more annoying when there is iframe in play. When the user interacts with iframe, the browser calls your window.Blur...

3 answers

9


I think you can use the event blur

Example using simple javascript:

window.addEventListener('blur', function(){
    // correr codigo aqui
});

In the example apart from firing the event in the window change, when it does Focus in the address bar it also fires.

EDIT:

I add more info after a good question from @Joãoparaná:

In Safari/IOS the event blur does not fire. In this case the pagehide. You may need to use both if necessary:

window.addEventListener('blur', correrEstaFuncao);
window.addEventListener('pagehide', correrEstaFuncao);

Demo

  • Hi @Die, the example didn’t work on iPad Safari with iOS 7. I didn’t test on other versions.

  • 1

    @Joãoparaná, good question. I added more info to the answer.

2

The new HTML5 api Page Visibility API does just what you’re asking:

if(document.hidden !== undefined){
    document.addEventListener("visibilityChange", acao, false);   
}

function acao(){
    console.log("O estado da janela mudou!");
}

Example: FIDDLE

1

Some time ago I looked for a script that did just that.

He adds listeners for various types of browsers. Calling the function functionHidden when the page loses its "focus". And functionVisible when the page comes back to "focus".

(function () {
    var hidden = "hidden";
    if (hidden in document) document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document) document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document) document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document) document.addEventListener("msvisibilitychange", onchange);
    else if ('onfocusin' in document) document.onfocusin = document.onfocusout = onchange;
    else window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

    function onchange(evt) {
        var evtMap = {
            focus: true,
            focusin: true,
            pageshow: true,
            blur: false,
            focusout: false,
            pagehide: false
        };

        evt = evt || window.event;
        if (evt.type in evtMap) evtMap[evt.type] ? functionVisible() : functionHidden();
        else this[hidden] ? functionHidden() : functionVisible();
    }

    function functionVisible() {
        console.log('Visible');
    }

    function functionHidden() {
        console.log('Hidden');
    }
})();

This script maps the events of almost all browsers.

You can test it on jsfiddle looking at the console.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.