Is er een browsergebeurtenis voor het venster dat focus krijgt?

Is er een manier om, wanneer ik op mijn browser klik en focus geef, een methode één keer uit te voeren? En wanneer de browser de focus verliest en vervolgens de focus weer terugkrijgt om die methode maar één keer opnieuw uit te voeren.


Antwoord 1, autoriteit 100%

Je kunt gebeurtenishandlers focusen bluraan het window-object toevoegen om bij te houden of het venster focus krijgt of verliest (zie http://jsfiddle.net/whQFz/voor een triviaal voorbeeld). windowis van toepassing op de huidige browsercontext (dus dat kan een venster, een tabblad, een frame, enz. zijn).

Opmerking:De gebeurtenis focuswordt geactiveerd telkens wanneer het venster focus krijgt en de gebeurtenis blurwordt geactiveerd telkens wanneer de focus verloren gaat. Een voorbeeld van iets dat de aandacht van het venster afleidt, is een alert-venster. Als je probeert te waarschuwen in een onfocusgebeurtenishandler, krijg je een oneindige reeks waarschuwingen!

// Set global counter variable to verify event instances
var nCounter = 0;
// Set up event handler to produce text for the window focus event
window.addEventListener("focus", function(event) 
{ 
    document.getElementById('message').innerHTML = "window has focus " + nCounter; 
    nCounter = nCounter + 1; 
}, false);
// Example of the blur event as opposed to focus
// window.addEventListener("blur", function(event) { 
// document.getElementById('message').innerHTML = "window lost focus"; }, 
// false);

Antwoord 2, autoriteit 20%

$(document).ready(function() { $(window).one("focus", SomeFocusMethod); } );
var SomeFocusMethod = function()
{
    // do stuff
    $(window).one("blur", SomeBlurMethod);
}
var SomeBlurMethod = function() 
{ 
    // do stuff
    $(window).one("focus", SomeFocusMethod); 
}

Antwoord 3, autoriteit 11%

Als u zich richt op browsers die nieuwer zijn dan IE9, moet u echt de javascript-browser-API “Page Visibility API” gebruiken:
https://developer.mozilla.org/en-US/docs /Web/Guide/User_experience/Using_the_Page_Visibility_API


Antwoord 4

function blinkTab() {
    const browserTitle = document.title;
    const stopBlinking = () => {
        document.title = browserTitle;
    };
    const startBlinking = () => {
        document.title = 'My New Title';
    };
    function registerEvents() {
        window.addEventListener("focus", function(event) { 
            stopBlinking();
        }, false);
        window.addEventListener("blur", function(event) {
            setInterval(() => {
                startBlinking();
            }, 500);
        }, false);
    };
    registerEvents();
};
blinkTab();

Other episodes