Question

有没有办法在我点击浏览器并给予关注时，运行一次方法？然后，当浏览器失去焦点然后重新获得焦点时，再次再次运行该方法。

Answer 1

您可以在focus对象上附加blur和window事件处理程序，以跟踪窗口是否获得焦点（请参阅http://jsfiddle.net/whQFz/以获取一个简单的示例）。 window适用于当前浏览器上下文（因此可以是窗口，选项卡，框架等）。

注意：每次窗口获得焦点时，focus事件都会触发，每次失去焦点时blur事件都会触发。将焦点从窗口移开的一个例子是alert窗口。如果您尝试在onfocus事件处理程序中发出警报，您将获得无限循环警报！

// 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 " + nIndex; 
    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);

Answer 2

$(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); 
}

Answer 3

如果您的目标浏览器比IE9更新，那么您应该使用＆＃34; Page Visibility API＆＃34; javascript浏览器api： https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

Answer 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();

是否有窗口获取焦点的浏览器事件？

4 个答案: