javascript - 窗口失焦时恢复选项

Question

我正在运行一个基于窗口焦点的计时器。如果窗口处于焦点状态，则计时器将向前移动，否则将显示一条消息。我在 focusmsg div 中显示焦点消失消息，并在窗口处于焦点时隐藏此 div。因此，焦点移出消息不可见。

现在我不想显示简单的焦点消失消息，而是显示一个恢复按钮，以便用户需要单击恢复按钮以确保在返回到失去焦点的窗口后窗口处于焦点。

请记住，在用户通过单击恢复按钮确保窗口获得焦点之前，恢复按钮不应消失。

如果您能提供一个 jsfiddle 的答案，那对我来说会很棒!

    if(w_focus) {
        $("#focusmsg").hide();

        var timer = 0;
        var full = 10;
        timer++;

        if(timer == full) {
            var show = "Full";
            $("#timmsg").html(show);
        }


        else {
            setTimeout(adTimer, 1000);
            $("#between").hide();
        }
    } else {
        setTimeout(adTimer, 2000);

        var msg = "Focus lost! Resume now";
        $("#focusmsg").html(msg);
    }


$(document).ready(function() {

        var hidden, change, vis = {
            hidden: "visibilitychange",
            mozHidden: "mozvisibilitychange",
            webkitHidden: "webkitvisibilitychange",
            msHidden: "msvisibilitychange",
            oHidden: "ovisibilitychange" /* not currently supported */
        };             
    for (hidden in vis) {
        if (vis.hasOwnProperty(hidden) && hidden in document) {
            change = vis[hidden];
            break;
        }
    }
    if (change)
        document.addEventListener(change, onchange);
    else if (/*@cc_on!@*/false) // IE 9 and lower
        document.onfocusin = document.onfocusout = onchange
    else
        window.onfocus = window.onblur = onchange;

    function onchange (evt) {
        evt = evt || window.event;
        if (evt.type == "focus" || evt.type == "focusin")
           window_focus = true;
        else if (evt.type == "blur" || evt.type == "focusout")
           window_focus = false;
        else        
           window_focus = this[hidden] ? false : true;
    }

});

Answer 1

当单击恢复按钮时，您可以使用以下命令将 w_focus 变量设置为 true。请注意，您必须删除 window.onfocus 函数并仅使用它，因此只有当用户实际单击恢复按钮时，它才会将 w_focus 变量设置为 true。

实例:

var w_focus = true;

window.onblur = function() {
  w_focus = false;
  $('#resume-button').show();
}

$('#resume-button').on('click', function() {
  w_focus = true;
  $('#resume-button').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="resume-button" style="display:none">Resume</button>

(尝试运行此代码片段，然后转到另一个选项卡或打开另一个应用程序，然后返回。您应该看到恢复按钮，该按钮将消失并将 w_focus 变量设置为单击后为真)

链接到工作 JSFiddle 示例: http://jsfiddle.net/3tzmeta4/