Como obter a "confirmação da reapresentação do formulário" quando o utilizador tenta actualizar o navegador
Tenho uma página que não permite ao utilizador actualizar a página clicando no botão de actualização do navegador ou carregando em F5. Então eu quero simular 'resubmission do formulário' a fim de mostrar a mensagem prompt.
Alguém pode orientar - me numa abordagem para a implementar?Existe alguma solução cross-browser disponível para isso?
4 answers
Para actualizar sem obter a linha de comandos, a página deve ter sido obtida usando o HTTP GET
Faça com que o formulário tenha method="GET" em vez de method="POST" (e corrija os processos do servidor para trabalhar com esta mudança como apropriado)
Alternativamente cache os dados de post em uma sessão e redirecione para a página de exibição usando o código HTTP 303 imediatamente após o envio do formulário.
Se você quiser causar o prompt, faça o link que leva o Usuário para a página em um botão enviar em um formulário POST. se um usuário chega com um pedido GET tem que servi-los uma página com javascript que submete um formulário convertendo o pedido em um pedido POST.
Para o botão Navegador, compatível com cruz por MDN:
window.onbeforeunload = function() {
return "Data will be lost if you refresh the page. Are you sure?";
};
Para a tecla keystroke:
window.addEventListener("keyup", checkForRefresh, false);
var checkForRefresh = function(event) {
if (event.keyCode == 116) {
alert("Data will be lost if you refresh the page. Are you sure?");
}
};
A tecla pode precisar de polifill para o IE8, mas eles fornecem-no nos documentos .
O que você quer é ouvir para o evento {[[1]} e lançar uma caixa de confirmação.
EDIT: desde que afirmou em comentários sobre outra resposta que precisa de suportar o Safari móvel (que não suporta beforeunload. Podias tentar uma biblioteca como a jquery.Areyoure
Por a discussão nesta página , suporta Safari móvel, embora eu próprio não a tenha usado
Note que alguns navegadores irão ignorar o texto que fornece no confirm invoca e mostra o seu texto por omissão. Existem formas mais profundas de contornar isso, mas isto irá pedir a caixa de diálogo.
$(window).on("beforeunload", function() {
return confirm("Do you really want to close?");
});
De outras discussões:
Há duas abordagens que as pessoas costumavam usar aqui:Método 1: Utilizar AJAX + Redirect Desta forma, você postar o seu formulário em segundo plano usando JQuery ou algo semelhante à Página 2, enquanto o usuário ainda vê a página 1 exibida. Após a publicação com sucesso, você redireciona o navegador para a Página 2.
Método 2: Post + redireccionar para self
Esta é uma técnica comum em fóruns. O formulário na Page1 publica os dados na Page2, Page2 processa os dados e faz o que precisa ser feito, e então ele faz um redirecionamento HTTP em si mesmo. Desta forma, a última "ação" de que o navegador se lembra é um simples GET na página 2, de modo que o formulário não está sendo submetido novamente em F5.
Pode consultar esta resposta: https://stackoverflow.com/a/3968038/1853444