1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
---
title: Page Visibility API
slug: Web/API/Page_Visibility_API
tags:
- DOM
- Intermediário
- Tutoriais
- Visibilidade
translation_of: Web/API/Page_Visibility_API
---
<p id="Summary">{{DefaultAPISidebar("Page Visibility API")}}</p>
<p><span class="seoSummary">A <strong>API de visibilidade de página</strong> deixa você saber quando uma página da web está visível ou em foco.</span> Com a navegação em abas, existem razões para que quaisquer páginas da web que estejam sendo executadas em segundo plano e não visíveis para o usuário. Quando o usuário minimiza a página ou muda para outra aba, a API envia um evento {{event("visibilitychange")}} informando o estado de visibilidade da página. Você pode detectar o evento e realizar algumas ações ou modificar o seu comportamento. Por exemplo, se a sua aplicação web estiver reproduzindo um video, ela pode pausar durante o momento que o usuário estiver olhando para outra aba, e reproduz novamente quando o usuário retorna para a aba. O usuário não perde nenhuma parte do video e pode continuar assistindo.</p>
<h3 id="Benefícios">Benefícios</h3>
<p>A API é particularmente util para economizar recursos dando aos desenvolvedores a oportunidade de não realizar tarefas desnecessárias quando a página não está visível.</p>
<h3 id="Casos_de_uso">Casos de uso</h3>
<p>Alguns exemplos:</p>
<ul>
<li>Um site tem um carrossel de imagens que não devem avançar para o próximo slide a não ser que o usuário esteja visualizando a página.</li>
<li>Uma aplicação mostrando um painel de informações não quer fazer requizições de atualizações ao servidor quando a página não estiver visível.</li>
<li>Uma página quer detectar quando está sendo prerenderizada para poder contar o número de visualizações de forma mais precisa.</li>
</ul>
<p>Desenvolvedores têm historicamente usado alternativas de se detectar isto. Por exemplo, registrando um handler onblur/onfocus na janela te ajuda a saber quando a sua página não é a ativa, mas isto não te diz se a sua página não está visível para o usuário. Já a API de Visibilidade de Página faz isto. (Quando comparada com a técnica de registrar handlers de onblur/onfocus na janela, uma diferencia chave é que a página <em>não</em> fica escondida quando outra janela é ativada e a janela do navegador perde o foco. A página só fica escondida quando o usuário troca para uma aba diferente ou minimiza a janela do navegador.)</p>
<h2 id="Example" name="Example">Exemplo</h2>
<p>Veja <a href="http://daniemon.com/tech/webapps/page-visibility/">exemplo em caso real</a> (video com som).</p>
<p>O exemplo, que pausa o video quando você troca para outra aba e volta a reproduzir quando você retorna, foi criado com o seguinte código:</p>
<pre class="brush: js">// Configura o nome da propriedade hidden e o evento de mudança para visibilidade
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Suporte para Opera 12.10 e Firefox 18 em diante
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
// Se a página está escondida, pausa o video;
// Se a página está visível, reproduz o video
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// Alerta se o navegador não suporta addEventListener ou a API de visibilidade da página
if (typeof document.addEventListener === "undefined" ||
typeof <code class="language-js">document<span class="punctuation token">[</span>hidden<span class="punctuation token">]</span></code> === "undefined") {
alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Manipula o evento de mudança da visibilidade da página
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// Reverte para o favicon existente para o site quando a página é fechada;
// caso contrário, o favicon continua como paused.png
window.addEventListener("unload", function(){
favicon.change("/favicon.ico");
}, false);
// Quando o video é pausado, configura o favicon.
// Isso mostra a imagem paused.png
videoElement.addEventListener("pause", function(){
favicon.change("images/paused.png");
}, false);
// Quando o video é reproduzido, configura o favicon.
videoElement.addEventListener("play", function(){
favicon.change("images/playing.png");
}, false);
// Configura o título da aba com o tempo atual do video
videoElement.addEventListener("timeupdate", function(){
document.title = Math.floor(videoElement.currentTime) + " segundo(s)";
}, false);
}
</pre>
<h2 id="Visão_geral_das_propriedades">Visão geral das propriedades</h2>
<h3 id="document.hidden_Somented_leitura"><code>document.hidden</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Somented leitura </span></h3>
<p>Retorna <code>true</code> se a página está escondida para o usuário, caso contrário, retorna <code>false</code>.</p>
<h3 id="document.visibilityState_Somente_leitura"><code>document.visibilityState</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Somente leitura </span></h3>
<p>É a <code>cadeia de caracteres que denota a visibilidade do documento</code>. Possíveis valores:</p>
<ul>
<li><code>visible</code> : o conteúdo da página pode estar parcialmente visível. Na prática, isso significa que a página é a aba ativa de uma janela não minimizada.</li>
<li><code>hidden</code> : o conteúdo da página não está visível para o usuário. Na prática, isso significa que o documento está em uma aba inativa, em uma janela minimizada, ou o sistema operacional está com a tela travada.</li>
<li><code>prerender</code> : o conteúdo da página está sendo prerenderizado e não está visível para o usuário(considerado como escondida para motivos de <code>document.hidden</code>). O documento pode começar neste estado, mas nunca mudar dele para algum outro. Nota: a compatibilidade com navegadores é opcional.</li>
<li><code>unloaded</code> : a página está sendo removida da memória(a aba ou janela está sendo fechada). Nota: a compatibilidade com navegadores é opcional</li>
</ul>
<pre class="brush: js">//startSimulation e pauseSimulation definidas em outro lugar
function handleVisibilityChange() {
if (document.hidden) {
pauseSimulation();
} else {
startSimulation();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
</pre>
<h2 id="Example" name="Example">Nota</h2>
<p>Os estados de visibilidade de {{HTMLElement("iframe")}} são os mesmos do documento pai. Esconder o iframe com propriedades CSS não ativa os eventos de visibilidade nem muda o estado do documento do conteúdo.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Page Visibility API')}}</td>
<td>{{Spec2('Page Visibility API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>13 {{property_prefix("webkit")}}<br>
33</td>
<td>{{CompatGeckoDesktop(10)}} {{property_prefix("moz")}}<br>
{{CompatGeckoDesktop(18)}}</td>
<td>10</td>
<td>12.10[1]</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>4.4 {{property_prefix("webkit")}}</td>
<td>{{CompatGeckoMobile(10)}} {{property_prefix("moz")}}<br>
{{CompatGeckoMobile(18)}}</td>
<td>10</td>
<td>12.10[1]</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Não ativa o evento <code><a href="/en-US/docs/Web/Events/visibilitychange">visibilitychange</a></code> quando a janela do navegador é minimizada, nem configura <code>hidden</code> como <code>true</code>.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>Descrição da <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx">API de Visibilidade de Página</a> do IEBlog.</li>
<li>Descrição da <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="http://code.google.com/chrome/whitepapers/pagevisibility.html">API de visibilidade de Página</a> do Google</li>
</ul>
|
