Differenza tra document.hidden vs document.hasFocus()

Question

Spiegare la differenza tra document.hidden, l'HTML5 Page Visibility API e document.hasFocus(). Sto facendo un progetto che appare HTML5 Desktop Notification quando la scheda non è a fuoco. Sono un po 'confuso quale usare.

Answer 1

Il hidden attribute si definisce in questo modo:

Su come ottenere, l'attributo hidden deve restituire true se l' Document contenuto dal ( finestra root nella finestra del browser) top level browsing context non è visibile a tutti. L'attributo DEVE restituire false se lo Document contenuto dallo top level browsing context è almeno parzialmente visibile su almeno uno schermo .

Se la defaultView del Document è nullo, su come ottenere l'attributo hidden devono tornare vero.

Il hasFocus method è definita come questo

Procedimento hasFocus() su Document oggetti deve restituire true se è focalizzata la s' browsing contextDocument, e tutti i suoi ancestor browsing contexts concentriamo, e il top-level browsing context ha lo stato del sistema . Se Document non ha browsing context o se il suo browsing context non ha top-level browsing context, il metodo restituirà sempre false.

Ad esempio, se si apre una pagina in una scheda in primo piano, e quindi si apre un'altra finestra, la scheda sarà (o potrebbe) essere ancora parzialmente visibile, quindi hidden restituisce false. Tuttavia, la nuova finestra ha lo stato attivo, pertanto hasFocus() restituisce false per la scheda.

Se si esegue il seguente frammento di codice, il documento all'interno del iframe saranno visibili, ma non avrà messa a fuoco (questa pagina StackOverflow si concentra invece):

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

Ma in questo altro, dal momento che si fa clic sul pulsante all'interno del iframe, è sia visibile e mirata:

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!" />