Como mostrar o “Tem certeza de que deseja sair desta página?” Quando as mudanças cometido?

StackOverflow https://stackoverflow.com/questions/1119289

Pergunta

Aqui no stackoverflow, se você começou a fazer mudanças em seguida, tentar navegar para fora da página, um botão de javascript confirmam aparece e pergunta: "Tem certeza de que deseja sair desta página?" blee blá bloo ...

Alguém já implementou isso antes, como posso controlar o que as mudanças foram cometidos? Eu acredito que eu poderia fazer isso eu mesmo, eu estou tentando aprender as boas práticas de você os especialistas.

Eu tentei o seguinte mas ainda não funciona: 

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

Alguém pode postar um exemplo?

Foi útil?

Solução

Update (2017)

Navegadores modernos agora considerar exibindo uma mensagem personalizada para ser um risco de segurança e foi, portanto, removido de todos eles. Browsers agora só exibir mensagens genéricas. Uma vez que já não têm de se preocupar com a criação da mensagem, é tão simples como: 

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

Leia abaixo para obter suporte ao navegador legado.

Update (2013)

A resposta orginal é adequado para IE6-8 e FX1-3.5 (que é o que foram alvo de volta em 2009, quando ele foi escrito), mas é um pouco fora da data agora e não vai funcionar na maioria dos navegadores atuais - I 've deixado abaixo para referência.

O window.onbeforeunload não for tratada de forma consistente em todos os navegadores. Deve ser uma referência de função e não uma string (como a resposta original indicado), mas que o trabalho vontade em navegadores mais antigos, porque o cheque para a maioria deles parece ser se alguma coisa é atribuído a onbeforeunload (incluindo uma função que retorna null).

Você define window.onbeforeunload para uma referência de função, mas em navegadores mais antigos você tem que definir o returnValue do evento em vez de apenas retornando uma string: 

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

Você não pode ter que confirmOnPageExit fazer a verificação e return null se você deseja que o usuário para continuar sem a mensagem. Você ainda precisará remover o evento de forma confiável ligar e desligar: 

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

resposta Original (trabalhou em 2009)

Para ativá-lo: 

window.onbeforeunload = "Are you sure you want to leave?";

Para desligá-lo: 

window.onbeforeunload = null;

Tenha em mente que este não é um evento normal -. Você não pode vincular a ele da maneira padrão

Para verificar se há valores? Isso depende de sua estrutura de validação.

Em jQuery isso poderia ser algo como (exemplo muito básico): 

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Outras dicas

O onbeforeunload Microsoft-ismo é a coisa mais próxima que temos de uma solução padrão, mas esteja ciente de que o suporte ao navegador é desigual; por exemplo. para o Opera ele só funciona na versão 12 e mais tarde (ainda em beta como esta escrito).

Além disso, para o máximo de compatibilidade , você precisa fazer mais do que simplesmente retornar uma string, como explicado na Mozilla Developer Network .

Exemplo: Definir as duas funções seguintes para a activação / desactivação da linha de navegação (cf. o exemplo MDN): 

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

Em seguida, definir um formulário como este: 

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

Desta forma, o usuário só será avisado sobre como navegar longe se ele mudou a área de texto, e não será solicitado quando ele está realmente enviar o formulário.

Para fazer este trabalho no Chrome e Safari, você teria que fazê-lo como este 

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

Referência: https://developer.mozilla.org/en/DOM/window. onbeforeunload

Com JQuery este material é muito fácil de fazer. Desde que você pode ligar-se a conjuntos.

não é o suficiente para fazer o onbeforeunload, você deseja acionar somente a navegar para fora se alguém começou a editar o material.

jquerys 'beforeunload' trabalhou muito para mim 

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

Esta é uma maneira fácil de apresentar a mensagem se houver dados são introduzidos na forma, e não para mostrar a mensagem se o formulário é enviado: 

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

para novas pessoas que está à procura de uma solução simples, basta tentar Areyousure.js

Para expandir a de Keith já surpreendente resposta :

mensagens de aviso sob encomenda

Para permitir mensagens de aviso personalizado, você pode envolvê-lo em uma função como esta: 

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

Em seguida, basta chamar essa função com sua mensagem personalizada: 

preventNavigation("Baby, please don't go!!!");

permitindo a navegação novamente

Para re-ativar a navegação, tudo que você precisa fazer é definir window.onbeforeunload para null. Aqui está, envolto em uma função pequeno puro que pode ser chamado em qualquer lugar: 

function enableNavigation() {
    window.onbeforeunload = null;
}

Usando jQuery para vincular isso a elementos de formulário

Se estiver usando jQuery, isso pode facilmente ser obrigado a todos os elementos de uma forma como esta: 

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

Em seguida, para permitir que o formulário seja enviado: 

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});
formas

dinamicamente modificado:

preventNavigation() e enableNavigation() pode ser vinculado a quaisquer outras funções necessárias, tais como modificar dinamicamente um formulário, ou clicando em um botão que envia um pedido de AJAX. Eu fiz isso, adicionando um elemento de entrada oculto ao formulário: 

<input id="dummy_input" type="hidden" />

Então qualquer momento eu quero impedir que o usuário navegar para fora, eu provocar a mudança em que a entrada para se certificar de que preventNavigation() é executado: 

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

Aqui tentar isso funciona 100% 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

Quando o usuário começa a fazer alterações no formulário, um sinalizador booleano será definido. Se o usuário tenta navegar para fora da página, você verificar que a bandeira no window.onunload evento. Se o sinalizador é definido, você mostra a mensagem, retornando-o como uma string. Retornando a mensagem como uma string irá aparecer um diálogo de confirmação que contém a mensagem.

Se você estiver usando ajax para confirmar as alterações, você pode definir o sinalizador para false após as alterações foram cometidos (ou seja, em caso de sucesso Ajax).

estados padrão que levando pode ser controlado por cancelar a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload" rel="nofollow noreferrer"> beforeunload evento não nulo valor . Ele também afirma que os autores devem usar event.preventDefault () em vez de returnValue, ea mensagem mostrada ao usuário não é personalizável .

A partir de 69.0.3497.92, o Chrome ainda não encontrou o padrão. No entanto, há um relatório de bug arquivado, e uma < a href = "https://chromium-review.googlesource.com/c/chromium/src/+/1154225" rel = "nofollow noreferrer"> revisão está em andamento. Chrome requer returnValue a ser definido por referência ao objeto de evento, não o valor retornado pelo manipulador.

É responsabilidade do autor para controlar se as alterações foram feitas; isso pode ser feito com uma variável ou assegurando o evento é tratado apenas quando necessário. 

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

Você pode adicionar um evento onchange na textarea (ou quaisquer outros campos) que definir uma variável em JS. Quando as tentativas de usuários para fechar a página (window.onunload) você verificar o valor dessa variável e mostrar o alerta em conformidade.

Com base em todas as respostas sobre esta discussão, escrevi o seguinte código e funcionou para mim.

Se você tem apenas algumas tags de entrada / textarea que requer um evento onunload para ser verificado, você pode atribuir HTML5 data-atributos como data-onunload="true"

para, por exemplo. 

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

e o Javascript (jQuery) pode ficar assim: 

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

aqui é o meu html 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

E então é como eu fiz algo semelhante em JavaScript 

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

Ele pode ser facilmente feito através da criação de um ChangeFlag para true, em onChange caso de TextArea . Use javascript para a caixa de diálogo confirmar show baseado no ChangeFlag valor. Descarte a forma e navegue até a página solicitada se confirmam retorna verdadeiro, caso contrário não fazer nada .

O que você deseja usar é o evento onunload em JavaScript.

Aqui está um exemplo: http://www.w3schools.com/jsref/event_onunload. asp

Há um parâmetro "onunload" para a tag body você pode chamar javascript funções de lá. Se ele retorna false impede a navegação de distância.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top