Разница между документами.скрытый документ против.hasFocus()

Пожалуйста, объясните разницу между document.hidden, API видимости страницы HTML5 и document.hasFocus(). Я делаю проект, который соз HTML5 Desktop Notification когда вкладка не сфокусирована . Я запутался, какой из них использовать.

8
dom html5 javascript javascript-events

1 ответов

на hidden атрибут определяется следующим образом:

на получение, в hidden атрибут должен возвращать true, если документ содержащийся в контекст просмотра верхнего уровня (корень окно в окне просмотра браузера) не отображается вообще. Атрибут Должен возвращать false, если документ содержащийся в верхний уровень контекст просмотра по крайней мере, частично видимый по крайней мере на одном экран.

если defaultView на документ равно null, при получении, hidden атрибут должен возвращать true.

на hasFocus метод определяется следующим образом

на hasFocus() метод on Document объекты должны возвращать true, если the Document ' s просмотр контексте ориентирован, и все свой контекст просмотра предков также сосредоточены, и топ-уровня контекст просмотра имеет система фокусировки. Если Document нет просмотр контексте или если его просмотр контексте нет контекст просмотра верхнего уровня, тогда метод будет всегда возвращаться ложный.

например, если открыть страницу на вкладке переднего плана, а затем открыть другое окно, вкладка будет (или может) по-прежнему частично видна, поэтому hidden возвращает false. Однако новое окно имеет фокус, поэтому hasFocus() возвращает false для вкладки.

если вы запустите следующий фрагмент, документ внутри iframe будет виден, но не будет иметь фокуса (вместо этого эта страница stackoverflow сфокусирована):

document.body.innerHTML = 
  '<p>hidden: ' + document.hidden + '</p>' +
  '<p>hasFocus: ' + document.hasFocus() + '</p>';

но в этом другом, так как вы нажимаете кнопку внутри iframe, она одновременно видна и сосредоточился:

document.getElementsByTagName('input')[0].onclick = function() {
  document.body.innerHTML = 
    '<p>hidden: ' + document.hidden + '</p>' +
    '<p>hasFocus: ' + document.hasFocus() + '</p>';
};
<input type="button" value="Click me!" />
11