diff options
Diffstat (limited to 'files/pt-br/web/api/window/popstate_event/index.html')
-rw-r--r-- | files/pt-br/web/api/window/popstate_event/index.html | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/files/pt-br/web/api/window/popstate_event/index.html b/files/pt-br/web/api/window/popstate_event/index.html new file mode 100644 index 0000000000..55f493f18b --- /dev/null +++ b/files/pt-br/web/api/window/popstate_event/index.html @@ -0,0 +1,144 @@ +--- +title: popstate +slug: Web/API/Window/popstate_event +translation_of: Web/API/Window/popstate_event +--- +<p>O evento <code>popstate </code>é disparado quando a entrada do histórico ativa é alterado. Se o histórico de entrada a ser ativado for criado por uma chamada <code>history.pushState() </code>ou for afetada por uma chamada <code>history.replaceState(),</code> a propriedade dos eventos<code> popstate </code>contém uma cópia do histórico de entrada do objeto.<br> + <br> + Note que apenas chamando <code>history.pushState()</code> ou <code>history.replaceState()</code> não ira disparar um evento <code>popstate. </code>O evento <code>popstate </code>apenas é disparado após uma ação no navegador como um click no botão de voltar (ou chamando <code>history.back() por javascript</code>)<br> + <br> + Navegadores tendem a lidar com o evento <code>popstate </code>diferentemente no carregamento da página. Chrome (anterior versão 34) e Safari sempre emitem um evento <code>popstate</code> no carregamento da página, mas o Firefox não.</p> + +<h2 id="Informação_geral">Informação geral</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">PopStateEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">defaultView</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The browsing context (<code>window</code>).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>state</code> {{readonlyInline}}</td> + <td><em>any</em></td> + <td>The current history entry's state object (if any).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidade_com_navegadores">Compatiblidade com navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>3.0[2]</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A implementação tem um suporte limitado.</p> + +<p>[2] A implementação em Android 2.2 e 2.3 tem problemas.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Um página no <code>http://example.com/example.html roda o código abaixo e irá gerar os logs indicados</code></p> + +<pre class="brush: js">window.onpopstate = function(event) { + console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}; +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // Logs "location: http://example.com/example.html, state: null +history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3} +</pre> + +<p>Observe que mesmo que a entrada do histórico inicial(para <code>http://example.com/example.html</code>) não tem nenhum estado associado a ele, um evento <code>popstate </code>é ainda disparado quando nós ativamos essa entrada após a segunda chamada para<code> history.back ().</code><br> + </p> + +<h2 id="Eventos_relacionados">Eventos relacionados</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li> +</ul> |