javascript - when - page load function in jquery




Existe um evento onload entre navegadores ao clicar no botão Voltar? (10)

Alguns navegadores modernos (Firefox, Safari e Opera, mas não o Chrome) suportam o cache especial "back / forward" (eu chamo de bfcache, que é um termo inventado pela Mozilla), envolvido quando o usuário navega de volta. Ao contrário do cache regular (HTTP), ele captura o estado completo da página (incluindo o estado de JS, DOM). Isso permite recarregar a página mais rapidamente e exatamente como o usuário a deixou.

O evento load não deve ser acionado quando a página é carregada desse bfcache. Por exemplo, se você criou sua interface do usuário no manipulador "load", e o evento "load" foi disparado uma vez no carregamento inicial e a segunda vez em que a página foi recarregada do bfcache, a página terminaria com elementos de interface do usuário duplicados.

É também por isso que adicionar o manipulador "unload" impede que a página seja armazenada no bfcache (tornando assim mais lento para navegar de volta) - o manipulador de descarregamento pode executar tarefas de limpeza, o que poderia deixar a página em estado inviável.

Para páginas que precisam saber quando estão sendo navegadas para longe, o Firefox 1.5+ e a versão do Safari com a correção para o bug 28758 suportam eventos especiais chamados "pageshow" e "pagehide".

Referências:

Para todos os principais navegadores (exceto o IE), o evento JavaScript onload não é disparado quando a página é carregada como resultado de uma operação de botão de retorno - só é disparada quando a página é carregada pela primeira vez.

Alguém pode me indicar algum exemplo de código cross-browser (Firefox, Opera, Safari, IE,…) que resolve esse problema? Estou familiarizado com o evento pageshow do Firefox, mas infelizmente nem o Opera nem o Safari implementam isso.


Bill, eu ouso responder a sua pergunta, no entanto eu não estou 100% de certeza com meus palpites. Acho que outros navegadores IE ao levar o usuário a uma página no histórico não apenas carregarão a página e seus recursos do cache, mas também restaurarão o estado inteiro do DOM (ler sessão) para ele. IE não faz restauração de DOM (ou pelo menos não fez) e, portanto, o evento onload parece ser necessário para a reinicialização adequada da página lá.


Eu não consegui obter os exemplos acima para trabalhar. Eu simplesmente queria acionar uma atualização de certas áreas div modificadas ao voltar para a página através do botão Voltar. O truque que usei foi definir um campo de entrada oculto (chamado de "bit sujo") para 1 assim que as áreas div mudassem do original. O campo de entrada oculto, na verdade, retém seu valor quando eu clico de volta, então onload eu posso verificar esse bit. Se estiver definido, atualizo a página (ou apenas atualizo as divs). No carregamento original, no entanto, o bit não está definido, então não perco tempo carregando a página duas vezes.

<input type='hidden' id='dirty'>

<script>
$(document).ready(function() {
  if ($('#dirty').val()) {
    // ... reload the page or specific divs only
  }
  // when something modifies a div that needs to be refreshed, set dirty=1
  $('#dirty').val('1');
});
</script>

E isso acionaria corretamente sempre que eu clicasse no botão Voltar.


Eu pensei que isso seria para "onunload", não o carregamento da página, uma vez que não estamos falando de disparar um evento ao bater "Voltar"? $ document.ready () é para eventos desejados no carregamento da página, não importa como você chegar a essa página (ou seja, redirecionar, abrir o navegador diretamente para o URL, etc.), não ao clicar em "Voltar", a menos que você esteja falando sobre o que disparar na página anterior quando for carregado novamente. E eu não tenho certeza se a página não está sendo armazenada em cache, pois descobri que os Javascripts ainda são, mesmo quando $ document.ready () está incluído neles. Tivemos que pressionar Ctrl + F5 ao editar nossos scripts que têm esse evento sempre que os revisamos e queremos testar os resultados em nossas páginas.

$(window).unload(function(){ alert('do unload stuff here'); }); 

é o que você deseja para um evento onunload ao pressionar "Voltar" e descarregar a página atual, e também dispararia quando um usuário fecha a janela do navegador. Isso soava mais parecido com o que era desejado, mesmo se eu estivesse em desvantagem com as respostas $ document.ready (). Basicamente, a diferença é entre um evento disparando na página atual enquanto ele está fechando ou aquele que carrega quando você clica em "Voltar" enquanto está carregando. Testado no IE 7, não posso falar pelos outros navegadores, pois eles não são permitidos onde estamos. Mas isso pode ser outra opção.


Eu tentei a solução do Bill usando $ (document) .ready ... mas no começo não funcionou. Descobri que, se o script for colocado depois da seção html, não funcionará. Se for a seção head, funcionará, mas apenas no IE. O script não funciona no Firefox.


Eu usei um modelo de html. No arquivo custom.js deste modelo, havia uma função como esta:

    jQuery(document).ready(function($) {

       $(window).on('load', function() {
          //...
       });

    });

Mas esta função não estava funcionando quando eu volto depois de ir para outra página.

Então, eu tentei isso e funcionou:

    jQuery(document).ready(function($) {
       //...
    });

   //Window Load Start
   window.addEventListener('load', function() {
       jQuery(document).ready(function($) {
          //...
       });
   });

Agora, tenho 2 funções "prontas", mas isso não causa erros e a página está funcionando muito bem.

No entanto, tenho que declarar que ele testou no Windows 10 - Opera v53 e Edge v42, mas nenhum outro navegador. Tenha em mente isso ...

Nota: a versão jquery era 3.3.1 e a versão migrada era 3.0.0


OK, eu tentei isso e funciona no Firefox 3, Safari 3.1.1 e IE7, mas não no Opera 9.52.
Se você usar o exemplo mostrado abaixo (com base no exemplo do palehorse), você receberá um pop-up de caixa de alerta quando a página for carregada pela primeira vez. Mas se você for para outra URL e clicar no botão Voltar para voltar a esta página, você não verá uma caixa de alerta no Opera (mas nos outros navegadores).

Enfim, acho que isso está perto o suficiente por enquanto. Obrigado a todos!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta http-equiv="expires" content="0">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( 
                    function(){
                      alert('test');
                    }
                 );
</script>
</head>
<body>
<h1>Test of the page load event and the Back button using jQuery</h1>
</body>
</html>

Pessoal, descobri que o JQuery tem apenas um efeito: a página é recarregada quando o botão voltar é pressionado. Isso não tem nada a ver com " pronto ".

Como é que isso funciona? Bem, o JQuery adiciona um ouvinte de evento onunload .

// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

Por padrão, não faz nada. Mas de alguma forma isso parece desencadear uma recarga no Safari, Opera e Mozilla - não importa o que o manipulador de eventos contém.

[ edit (Nickolay) : aqui está o porquê de funcionar dessa maneira: webkit.org , developer.mozilla.org . Por favor, leia esses artigos (ou meu resumo em uma resposta separada abaixo) e considere se você realmente precisa fazer isso e fazer com que sua página carregue mais lentamente para seus usuários.]

Não pode acreditar? Tente isto:

<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://.com">click me, then press the back button</a>
</body>

Você verá resultados semelhantes ao usar o JQuery.

Você pode querer comparar com este sem onunload

<body><!-- Will not reload on back button -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://.com">click me, then press the back button</a>
</body>

Unload evento não está funcionando bem no IE 9. Eu tentei com o evento de carga (onload ()), ele está funcionando bem no IE 9 e FF5 .

Exemplo:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery(window).bind("load", function() {
        $("[name=customerName]").val('');
    });
</script>
</head>
<body>
    <h1>body.jsp</h1>
    <form action="success.jsp">
        <div id="myDiv">

        Your Full Name: <input name="yourName" id="fullName"
            value="Your Full Name" /><br> <br> <input type="submit"><br>

        </div>

    </form>
</body>
</html>





pageload