6
How do I detect when the user clicks on the Back/Forward/Reload buttons of Google Chrome?
I already made a scheme to make a check before the user exit the page through the elements of the page itself but I can’t know when it clicks the buttons of the browser itself.
Here’s an example of what I did
<script language="javascript" >
var validNavigation = false;
var numPendencias = 0;
function verificaPendencias() {
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'Existem pendências ativas, deseja mesmo sair?'
//Gera um aviso para o usuário para evitar que saia com pendências ativas
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload=goodbye;
}
function atribuirEventos() {
// Attach the event keypress to exclude the F5 refresh
jQuery(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
jQuery(document).bind('keydown', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
jQuery(document).bind('keyup', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
//Atribui uma função a todos links na página
jQuery("a").bind("mouseover", function() {
validNavigation = true;
});
jQuery("a").bind("mouseout", function() {
validNavigation = false;
});
//Atribui uma função a todos forms na página
jQuery("form").bind("submit", function() {
validNavigation = true;
});
//Atribui uma função a todos input do tipo submit na página
// Attach the event click for all inputs in the page
jQuery("input[type=submit]").bind("click", function() {
validNavigation = true;
});
//Atribui uma função a todos buttons na página
jQuery("button").bind("mouseover", function() {
validNavigation = true;
});
jQuery("button").bind("mouseout", function() {
validNavigation = false;
});
}
// Wire up the events as soon as the DOM tree is ready
jQuery(document).ready(function() {
verificaPendencias();
atribuirEventos();
});
</script>
27/08 - To be more exact, I would like to generate a warning for when the user closes the browser or tab, but the problem is that through onbeforeunload, every time he clicked on a link, pressed F5 or did anything that exits the page itself it displayed the message, then I put the locks above, but even so when the user clicks on the buttons of the browser it generates the message, I wanted through the above method to avoid this and leave the message only when it was closed the tab or the browser.
So, I’m turned on that there is no way to avoid but I wanted to at least display an alert message, that I already managed to do, just the way I did ta making that with any drive I make on the page display the message, so I did those above locks. At least I wanted to know if the user clicked on any of the buttons regardless of what, in other forums I was told to use onpopstate, it works but it hangs the user and does not let him back nor advance in the history.
– brunodotcom
@brunodotcom If this answer answered your question please mark with answered.
– Slowaways
Actually still waiting for another answer, in other forums I saw the use of popstate but did not understand how to apply it
– brunodotcom