<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var message="If you continue, your session will be logged out!";
if(typeof evt=="undefined"){
evt=window.event;
}
if(evt){
evt.returnValue=message;
}
}
function after()
{
var flex=document.${application}||window.${application};
flex.unloadMethod(); //calls the flex class containing the "unloadMethod()" which
//calls the logout.jsp that does the actually dropping of credentials
}
</script>
So this is my thought:
When the user clicks back, refresh, or closes the window, the standard onbeforeunload pop-up box will appear along with the text located in my message variable. Then, if the user hits Cancel, the onunload event won't be executed and the user will stay on the current page. But if the user hits Okay, then the onunload event should fire off, which then executes my logoff classes.
This is what's happening:
The pop-up appears when needed and the Cancel button also works. But if the user clicks Okay, it seems like the onunload event fires off too quickly for my logoff classes to execute, because it never logs them off.
I know that my logout classes work because if I just call my flex.unloadMethod in the onbeforeunload, it logs them off.
I've researched this for a week now and it seems that I'm close but I'm putting something in the wrong place. If you have any examples or advice, it would be appreciated.
So, I've figured out some issues with my question with the help of Sunil D. The onunload event fires too quickly for my event to be triggered, so I've decided not to include a warning message, but just log the user off all together using the onbeforeunload event:
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var flex=document.${application}||window.${application};
flex.unloadMethod(); //calls the flex class containing the "unloadMethod()" which
//calls the logout.jsp that does the actually dropping of credentials
}
function after(evt)
{
}
</script>
Related
I have a requirement to show a prompt whenever our reservation page is navigated away from. When navigating within the app, there is no problem. A simple $onLocationChange works fine with a custom prompt. However when navigating to , for example, google or our logout page (which is in a separate angular app) the $onLocationChange does not work. In this case, I used:
window.onbeforeunload = onUnloadAppStart;
function onUnloadAppStart() {
var message = figureOutWhichMessageToUse();
return message;
}
this way I can at least customize the navigate message, even though I cant change the prompt box itself. However this causes a memory leak. So I need to set to null when I leave. Something like this:
$scope.$on("$destroy", function() {
window.onbeforeunload = null;
}
however this(the $destroy event) only seems to fire when I navigate within the app, same as the $onLocationChange. Furthermore I need to clean up binding AFTER the prompt, which is after the onUnloadAppStart function. This is because if I remove the binding and the user says "no, stay on this page", now my "onbeforeunload" is screwed up. Is there a way to fire functions after the onbeforeunload prompt?
Whenever the page gets refreshed or unloaded,the window.onbeforeunload event is triggered.Whenever this event is triggered,it gives a confirmation/alert box.On this confirmation/alert box ,we have two options "leave this page" and "stay on this page".I want to perform different actions when any these two buttons/options is clicked.How can i do this/capture clicking of these buttons?
<!DOCTYPE html>
<html>
<body >
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
Click here to go to w3schools.com
<script>
window.onbeforeunload = function() {
return "Do yoy want to Quit?";
}
</script>
</body>
</html>
Based on the suggestion of Frederic, I wanted to test the timer, and the result is: you can check if the user remains on the page, but you can't check if he comes out and intercept the event. The timer starts when you make a choice, then the timer is useful to give the time to the browser to load the new page (if you close your browser, is immediate and time is relative). But if the timer runs out, you have the answer that you want to stay on your page.
Tested on Chrome, for others must be tested.
window.onbeforeunload = function() {
setTimeout(function(){
console.log('I\'m still here !');
},5000);
return "Do yoy want to Quit?";
}
I hope it help you.
I need to prompt a user when they are leaving my ASP.Net page unexpectedly with a message to ask if they are sure they want to leave. A post back or when the save button is clicked should not fire the warning. There are a bunch of articles covering this but I am brand new to this and appear to have got my wires crossed.
The recommended way appears to be to use the window.onbeforeunload event but behaves unexpectedly for me. This is fired when the page loads as opposed to when the page unloads.
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
If I use the JQuery implementation it fires when the page unloads but the problem is it fires before the code behind is executed. So I cannot set a variable on the client saying don’t fire the event this time as it is a post back or a Save.
$(window).bind('beforeunload', function () {
return 'Are you sure you want to leave?';
});
Can anyone point me in the correct direction as I know I am making basic mistakes/miss-understanding?
Edit:
So I am nearly there:
var prompt = true;
$('a').live('click', function () {
//if click does not require a prompt set to false
prompt = false;
});
$(window).bind("beforeunload", function () {
if (prompt) {
//reset our prompt variable
prompt = false;
//prompt
return true;
}
})
Except the problem is in the above code I need to be able to differentiate between the clicks but I haven't been able to figure that out yet i.e. I am missing a condition here "//if click does not require a prompt set to false".
Any ideas?
Thanks,
Michael
You can try using this:
$(window).unload(function(){
alert('Message');
});
In case people are interested this is the roundabout solution to my problem. How to tell if a page unload in ASP is a PostBack
This is a warning that Firefox raises when I want to leave certain pages. Based on the pages I've seen this on and that this warning appears when I try to close the page after filling in the forms, I can only assume that it's working on a dynamic page. Which technology is used to implement this functionality? How can I implement it myself on a simple hello-world page?
You basically implement a handler for beforeunload event. This allows you to warn your users that they have unsaved data.
Pseudo Code:
window.onbeforeunload = function warnUsers()
{
if (needToConfirm)
{
// check to see if any changes to the data entry fields have been made
if(changesPresent) {
return message to display
}
else {
// no changes - return nothing
}
}
}
Here's a very good article that discusses this in depth: http://www.4guysfromrolla.com/webtech/100604-1.shtml Note: This link no longer exists. Here is a copy of it from the Wayback Machine:
https://web.archive.org/web/20211020134123/http://www.4guysfromrolla.com/webtech/100604-1.shtml
Note: There is onunload event also but that fires after the page has unloaded, hence is too late to take any reliable action. You should never put any critical code in onunload as that is never guranteed to execute.
Well, you need to try to add some other things like form. But something simple is:
EDIT: Fixed HTML;
<html>
<head>
<script language="javascript">
function mymessage()
{
alert("This message was triggered from the onunload event");
}
</script>
</head>
<body onbeforeunload="mymessage()">
<p>close this window and watch the warning box come up!</p>
</body>
</html>
Like the other answers have said, you can use a handler for beforeunload. To do this, you can use an eventListener:
addEventListener("beforeunload", () => {
// Do things before the page is closed.
event.preventDefault();
});
event.preventDefault() displays a message asking the user to confirm that they want to leave. You can also do something else like autosave without displaying a confirmation message.
According to MDN, returning a string or setting event.returnValue to activate the confirmation message is deprecated.
Here is the situation :
If I am in page-1 now I am clicking a link from page-1 to navigate to page-2. Before page-2 is loaded I am hitting escape so that still I am staying in page-1.
At that point I want to track that event.
Is there any JavaScript event so that I can track the above scenario?
More Info :
To avoid concurrent request to the "page-2", when the user clicks a link from page-1 I am redirecting to page-2 and disabling the link (to avoid multiple request to "page-2). At this point when we hit Esc and abort loading page-2, I need to enable the link again in page-1.
I tried using this code:
<html>
<head>
<script>
document.onkeypress = KeyPressed;
function KeyPressed(e)
{
if (!e) e = window.event; //IE Compatibility
alert(e.keyCode);
}
</script>
</head>
<body>
Stack Overflow
</body>
</html>
It detects any key pressed while you're on the page. Once you click on the SO link and hit escape, nothing happens. The browser is already receiving a response from the SO server and is starting to process it, this page has already been "left", despite appearances when you see "Waiting for http://stackoverflow.com" in your browser's status bar.
Your idea of handling this event is plain wrong. Blocking the button is required to make the user unable to do double post data. However, the request is sent instantaneously(!) after the click on the link.
So, if you click the link once, stop the page, then click second time - it will submit it twice, and that is not what is intended to happen.
Two events are triggered when the page unloads.
window.onUnload
window.onBeforeUnload
You can use these events to cancel the unload of the page, however after that, there page is considered done.
What you can do is make the page wait 5 secs or so before going to the new page:
eg:
window.onunload = (function() {
var time = new Date();
var cancel = false;
window.onkeypress = function (e) {
if ((e || window.event).keyCode == 27) cancel = true;
};
while(time > new Date() - 5000) {
if (cancel) return false;
}
});
In fact that may cause some browsers to hang since you're taking up all process time given to the JS script. ie: in the while block.
You could probably avoid that by doing a blocking function call, that isn't so process intensive, like one that is bound by network latency. eg: XMLHttpRequest() etc. I don't think calls that are queued such as setTimeout() will work here, as they don't block.
Since the <a href> tag tells the browser to move to another page, it's up to it to decide if it will still have your script running. If I were it, I wouldn't listen.
If you want to override that, I guess you should tell the browser not to listen to that particular onClick event, and put a callback in place that loads the target page in the background. This assures your page is still active. After the target page has loaded (by your script), you could kindly ask the browser to update itself with the received content.
So that's the theory. I have no idea if the DOM lets you just override the content of a loaded page, but I guess it does.