Question

我想确定用户何时在页面上。

因此，当用户单击另一个窗口（失去焦点）或更改选项卡时，我应该停止在页面上播放视频。

问题是试图同时做这两个事情。

例如，通过此JS插件（JQuery Visbility），我可以检查页面的选项卡/窗口是否打开。

这是怎么做的：

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

但是它无法检测页面是否具有焦点。例如，页面可能处于打开状态，但我可能会单独打开另一个窗口并保持焦点在那里。

以下代码可解决此问题（取自here）：

function check()
{
    if(document.hasFocus() == lastFocusStatus) return;

    lastFocusStatus = !lastFocusStatus;
    statusEl.innerText = lastFocusStatus ? 'with' : 'without';
}

window.statusEl = document.getElementById('status');
window.lastFocusStatus = document.hasFocus();

check();
setInterval(check, 200);

现在，我正在尝试同时进行这两个操作。有可能吗？

Answer 1

您可以为window的{{1}}和focus事件添加事件监听器。

blur

检查页面的页面可见性和页面焦点

1 个答案: