I checked this code on W3 schools :
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Write something clever here..";
});
You can use on one of your HTML item, but to apply it to the return button of the navigator ? (in order to warn the user that i will lose his job if he continues for example)
Add an event listener to your return button the same way you added it to your window. Instead of using beforeunload, use click.
You will more than likely need to create a custom alert, which is fairly simple. I created an alertUser() function that will fire when the user clicks on the return button.
You are going to want to format the divElem with #customAlert {position: absolute, z-index: 10} in your style sheet. The position:absolute ensures its independent of the other elements in its parent. In this case its the body of the page. The 10 on the z-index is excessive but ensure the alert will be out front, nearly every time. Unless someone formatted an element with a z-index 10 or greater. You can center it however you like on the page.
// Add this in your code after you have created the return button.
var returnButton = document.getElementById("returnButtonId")
returnButton.addEventListener("click", () => alertUser(event), false);
function alertUser() {
var divElem = document.createElement("DIV");
var divText = document.createTextNode("If you go back you will lose progress");
divElem.appendChild(divText);
var btnReturn = document.createElement("BUTTON");
var btnStay = document.createElement("BUTTON");
var btnReturnText = document.createTextNode("Go Back");
var btnStayText = document.createTextNode("Stay on page");
btnReturn.appendChild(btnReturnText);
btnStay.appendChild(btnStayText);
divElem.appendChild(btnReturn);
divElem.appendChild(btnStay);
divElem.setAttribute("id", "customAlert")
btnReturn.setAttribute("id", "return");
btnStay.setAttribute("id", "stay");
var returnButton = document.getElementById("return");
var stayButton = document.getElementById("stay")
returnButton.addEventListener('click', () => leavePage(event), false);
stayButton.addEventListener('click', () => stayOnPage(event), false);
}
function leavePage(e) {
alert("Left page, progress lost")
var customAlert = document.getElementById('customAlert')
customAlert.remove()
/**
Your code to handle the user leaving the page
*/
}
function stayOnPage(e) {
alert("Stayed on page")
var customAlert = document.getElementById('customAlert')
customAlert.remove()
/**
Your code to handle the user staying on the page
**/
}
UPDATE FROM COMMENT
At some point in the code the navigator and its buttons are created, a unique Id should be assigned to the buttons during that creation process. At some point after the navigator buttons are created and have been assigned Id's, you will add an event listener to the navigator buttons, to include the return button.
var returnButton = document.getElementById('returnButtonIdfromNavigator')
returnButton.addEventListener("click", () => alertUser(event), false);
This is the exact code from above all I did was change the Id name your searching for to match your requirement of it being the button from the navigator. Those two lines are not creating a button. It's simply giving you variable that is a reference to the actual return button from the navigator, and then you're assigning an event listener to the button through that reference.
The two buttons that are created in the alertUser() are not part of your navigation, but are part of the alert system. Its that "Are you sure you want to do this?" to the user. The btnStay will call stayOnPage() and, as its currently written in this example, will simply dismiss the alert as if nothing happened and allow the user to continue right where they are. While the btnReturn will call leavePage() which, if I was writing the leavePage() function, I would use the same function that the return button would use if the alert system was not present.
So instead of using the alertUser() when assigning event listeners to your navigation buttons, you would use the function that I assume already exists for the return button behavior.
//Adding event listeners to return button either with or without the warning
//Without alert system
var returnButton = document.getElementById('returnButtonIdfromNavigator')
returnButton.addEventListener("click", () => navigatorReturnButtonFunction(event), false);
/****** VS ******/
//Using alert system
var returnButton = document.getElementById('returnButtonIdfromNavigator')
returnButton.addEventListener("click", () => alertUser(event), false);
The code below is used to disable back event, but you can use it for your purpose. the first time the user clicks on back button the alert message will be shown. with second click the back will work.
history.pushState(null, null, location.href);
window.onpopstate = function () {
alert("you will lose your job;(");
};
This example is quite simple.
var formHasUnsavedChanges = false;
window.addEventListener("beforeunload", function (e) {
if (formHasUnsavedChanges === true) {
var msg = "your warning message"; // Some browsers show their own message.
(e || window.event).returnValue = msg;
return msg;
}
});
As soon as the user made changes, set formHasUnsavedChanges to true.
If you save your form through an AJaX call, you can set the variable to false after the save completed.
If you use a normal form, then set the variable to false right before submitting. Otherwise the warning message will pop up when saving.
This warning message will also pop up when clicking on a link or closing a tab.
Aren't you looking for this answer ? Browser back button "on click" action
It's a piece of JS that detects whenever a user uses the browser back button.
This code works well :
<script>
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function() {
history.go(1);
};
</script>