Existe uma onload evento cross-browser ao clicar no botão de volta?
https://stackoverflow.com/questions/158319
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Para todos os principais navegadores (exceto IE), o evento onload JavaScript não dispara quando a página é carregada, como resultado de uma operação de botão de volta -. Ele só é acionado quando a página é carregada pela primeira vez
Pode alguém ponto de me em algum exemplo de código cross-browser (Firefox, Opera, Safari, IE, ...) que resolve este problema? Estou familiarizado com o evento pageshow do Firefox, mas infelizmente nem Opera nem Safari implementar isso.
Solução
Gente, eu achei que JQuery tem apenas um efeito: a página é recarregada quando o botão Voltar é pressionado. Isto não tem nada a ver com " pronto ".
Como isso funciona? Bem, JQuery adiciona um onunload evento ouvinte.
// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...
Por padrão, ele 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
[ Editar (Nickolay) : aqui está o porquê ele funciona dessa forma: webkit.org , developer.mozilla. org . Por favor, leia os artigos (ou o meu resumo de uma resposta em separado abaixo) e considerar se você realmente necessidade de fazer isso e fazer o seu carregamento da página mais lento para os usuários.]
Não é possível 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://stackoverflow.com">click me, then press the back button</a>
</body>
Você verá resultados semelhantes quando usando JQuery.
Você pode querer comparar a esta, 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://stackoverflow.com">click me, then press the back button</a>
</body>
Outras dicas
Alguns navegadores modernos (Firefox, Safari e Opera, mas não Chrome) apoiar o especial "back / forward" cache (vou chamá-lo bfcache, que é um termo inventado por Mozilla), envolvidos quando o usuário navega Voltar . Ao contrário do cache normal (HTTP), que capta o estado completo da página (incluindo o estado de JS, DOM). Isso permite que ele re-carregar a página mais rápido e exatamente como o usuário deixou.
O evento load não é suposto fogo quando a página é carregada a partir deste bfcache. Por exemplo, se você criou seu UI no manipulador "load" eo evento "load" foi demitido depois da carga inicial, ea segunda vez quando a página foi re-carregado do bfcache, a página iria acabar com elementos duplicado UI.
É também por isso adicionando o manipulador "descarregar" pára a página seja armazenada no bfcache (tornando-se assim mais lento para trás navegar a) - o manipulador de descarregamento poderia executar tarefas de limpeza, o que poderia deixar a página em estado impraticável.
Para páginas que precisam saber quando eles estão sendo navegado away / volta para, Firefox 1.5+ e a versão do Safari com a correção para bug 28758 apoiar eventos especiais chamados "pageshow" e "pagehide".
Referências:
Eu corri para um problema que meus js não estava sendo executado quando o usuário tivesse clicado para trás ou para frente. A primeira vez que a intenção de parar o navegador do armazenamento em cache, mas isso não parece ser o problema. Meu javascript foi criado para executar após todas as bibliotecas etc. foram carregados. Eu verifiquei-los com o evento ReadyStateChange.
Depois de alguns testes eu descobri que o readyState de um elemento em uma página onde volta foi clicado não é 'carregado', mas 'completa'. Adicionando || element.readyState == 'complete' à minha declaração condicional resolvido meus problemas.
Apenas pensei que iria partilhar as minhas conclusões, esperamos que eles vão ajudar alguém.
Editar para a integralidade
Meu código olhou como se segue:
script.onreadystatechange(function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
// call code to execute here.
}
});
No exemplo de código acima, a variável roteiro era um elemento de script recém-criado que havia sido adicionado ao DOM.
OK, aqui está uma solução final com base na solução inicial de ckramer e exemplo de palehorse que funciona em todos os navegadores, incluindo o Opera. Se você definir history.navigationMode para 'compatível', em seguida, a função pronto jQuery irá disparar sobre as operações de botão Voltar no Opera, bem como os outros principais navegadores.
Esta página tem mais informações .
Exemplo:
history.navigationMode = 'compatible';
$(document).ready(function(){
alert('test');
});
Eu testei isso no Opera 9.5, IE7, FF3 e Safari e funciona em todos eles.
Eu não poderia obter os exemplos acima para o trabalho. Eu simplesmente queria disparar uma atualização de certas áreas div modificados quando voltar à página através do botão de volta. O truque que eu usei foi para definir um campo de entrada oculto (chamado de "pouco suja") para 1 logo que as áreas div mudaram a partir do original. O campo de entrada escondida realmente mantém o seu valor quando clico de volta, então ONLOAD posso verificar para este bit. Se for definido, eu atualizar a página (ou apenas atualizar os divs). Sobre a carga original, no entanto, o bit não está definido, então eu não perca tempo carregamento da 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 seria acionar corretamente sempre que eu cliquei no botão de volta.
Se bem me lembro, em seguida, adicionando um meio de eventos de descarregamento () que a página não pode ser armazenadas em cache (em frente cache / trás) - porque é mudanças de estado / pode mudar quando navega usuário distância. Então -. Não é seguro para restaurar o último segundo estado da página quando retornado para ele navegando por objeto a história
Eu pensei que este seria para "onunload", não de carregamento da página, uma vez que não estamos falando de disparar um evento quando bater "Back"? $ Document.ready () é para eventos desejados no carregamento da página, não importa como você chegar a essa página (ou seja, redirecionamento, abrindo o navegador para o URL diretamente, etc.), não quando clicar em "Back", a menos que você está falando sobre o que para disparar na página anterior quando ele carrega novamente. E eu não tenho certeza que a página não está sendo armazenada em cache como eu descobri que Javascripts são ainda, mesmo quando $ document.ready () está incluído neles. Nós tivemos que bater Ctrl + F5 ao editar nossos scripts que têm este evento sempre que revisá-los e queremos testar os resultados em nossas páginas.
$(window).unload(function(){ alert('do unload stuff here'); });
é o que você quer para um evento onunload quando bater "Back" e descarregar a página atual, e também fogo quando um usuário fecha a janela do browser. Isto soou mais como o que foi desejado, mesmo se eu estou em desvantagem com os US $ document.ready () respostas. Basicamente é a diferença entre um acionamento do evento na página atual enquanto ele está fechando ou por um que carrega quando clicar em "Back", uma vez que de carregamento. Testado no IE 7 bem, não posso falar pelos outros navegadores como eles não são permitidos onde estamos. Mas isso pode ser outra opção.
Eu posso confirmar ckramer esse evento pronto jQuery funciona no IE e Firefox. Aqui está um exemplo:
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var d = new Date();
$('#test').html( "Hi at " + d.toString() );
});
</script>
</head>
<body>
<div id="test"></div>
<div>
<a href="http://www.google.com">Go!</a>
</div>
</body>
</html>
para as pessoas que não querem usar toda a biblioteca jQuery i extraído a implementação de código separado. É apenas 0,4 KB grande.
Você pode encontrar o código, juntamente com um tutorial alemão nesta wiki: http://www.easy-coding.de/wiki/html-ajax-und- co /-onload-event-cross-browser kompatibler-domcontentloaded.html
Bill, ouso responder a sua pergunta, porém não estou 100% de certeza com meus palpites. Acho que outros, em seguida, navegadores IE quando se toma usuário para uma página na história não só irá carregar a página e seus recursos de cache, mas eles também irá restaurar o estado inteiro DOM (sessão de leitura) para ele. IE não fazer DOM restauração (ou pelo contrato de arrendamento não fazer) e, assim, os olhares de eventos onload seja necessário para o bom página re-inicialização lá.
Eu tentei a solução de Bill usando $ (document) .ready ... mas a princípio não funcionou. Descobri que se o script é colocado após a seção de html, não vai funcionar. Se ele é o chefe de seção que vai funcionar, mas apenas no IE. O script não funciona no Firefox.
OK, eu tentei isso e ele 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 de palehorse), você recebe uma caixa de alerta pop-up quando a página é carregada pela primeira vez. Mas se você, em seguida, ir para outro URL, e em seguida, apertar o botão Voltar para voltar a esta página, você não tem uma caixa de alerta pop-up na Opera (mas você faz nos outros navegadores).
De qualquer forma, eu acho que isso é perto o suficiente para agora. 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>
Unload não está funcionando bem no IE 9. Eu tentei com evento de carregamento (onload ()), que está funcionando bem no IE 9 e FF5 .
<%@ 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>
Eu tenho usado um modelo HTML. No arquivo custom.js deste modelo, houve uma função como esta:
jQuery(document).ready(function($) {
$(window).on('load', function() {
//...
});
});
Mas esta função não estava funcionando quando eu vou voltar depois ir para outra página.
Então, eu tentei isso e tem funcionado:
jQuery(document).ready(function($) {
//...
});
//Window Load Start
window.addEventListener('load', function() {
jQuery(document).ready(function($) {
//...
});
});
Agora, eu tenho a função 2 "pronto", mas ele não dá qualquer erro ea página está funcionando muito bem.
No entanto, tenho de declarar que tem testado no Windows 10 - Opera V53 e V42 Borda, mas há outros navegadores. Tenha em mente este ...
Nota: versão jquery era 3.3.1 e versão migrar era 3.0.0
