Prompt user for unsaved changes when leaving webpage - javascript

What options do I have preventing the user from just closing the browser or navigating to another site? (of course I can't prevent him pulling the plug on the computer, etc.: I just want to show him a warning)

You could use the JS beforeunload event in order to achieve this.

You should use the onunload event.
<script>
function onExitHandler() {
// called when user about to leave the page
}
</script>
<body onunload="onExitHandler()">
...
</body>
You can see an example here: http://www.w3schools.com/jsref/jsref_onunload.asp

Related

Prompt message on closing tab without user interaction?

I have one HTML page which contains only info, no user input, and redirects after 3 seconds. Is it possible to prompt a confirmation message if the user decides to close the tab?
That method only works if there is some user interaction like clicking on the page or adding text to input:
<script type="text/javascript">
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
</script>
If you take a look at the Mozilla Docs, you will see a note as follows.
To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with. Moreover, some don't display them at all.
So no. The onbeforeunload property should not really be used as you can not rely on the browser honouring it.

Differentiate browser refresh and browser close

I want to set a cookie when a visitor on the page closes the browser.
I used onbeforeunload method like this
<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>
followed this link
But found out that even refresh of page or click on any hyper link on the page,pops up an alert.
I need to set cookie only when visitor clicks cross button of browser and not on page refresh.
I followed some of the links like the one above and another here. And found from the post that we can not differentiate between close and refresh. But those posts were 3-4 years back.
Is there is any way to differentiate these events using JavaScript or Jquery?
I'm afraid you have no way to tell.
The only thing you can do is overload clicks on links and set a flag. But you can never know if it is a refresh or a close...
Hmm, what about this:
Set a cookie onbeforeunload
Globally onload, check the timestamp of the cookie to see whether this was a link, or a new session
If the timestamp difference is only a few seconds, delete the cookie
Well, unload is called when browser is closed and onload is called when you try to reload. You can use these properties and set flags , and fire events accordingly
Browser close and reload Check this link for more details

JavaScript body onunload not working

Hi I have the following code:
function redirect(){
window.location.href='logged_out_chat.php';
}
...in my header and the following body tag:
<body onunload="javascript:redirect();">
...when i try this on one laptop, it redirects as it is supposed to (when you click on any link), but on my other laptop, desktop and notebook it ignores the redirect and goes to any link you click on.
I have spent hours on this...all have the same browser. I was wondering if there is an alternative way i could redirect the user when they click on a link etc.
What do you expect would happen?
When I close your page in my browser you get to redirect me to a page of your liking?
This goes againts security and user control. You shouldn't be able to interfere with the page when I close it.
The morale is don't rely on onunload to do anything non-trivial.
When a window unloads it stops processing everything, that means ajax requests, pending downloads etc, most even freeze animated gifs. Some browsers support onbeforeunload, but I completely agree with #Raynos you can't count on the event, so using it is not a good design decision.
You can't hijack onunload and redirect the user. That would prevent the user from closing their browser, refreshing the page, or manually navigating to another site. If that's what you are trying to do, you are out of luck. All onunload is good for is asking the user if they are sure they want to leave the page.
If, however, you are trying to cause a clicked link to go to a different location, that's easy. To change the link permanently:
myLink.href = 'logged_out_chat.php';
If you want to change the links temporarily, add a click handler that you can later remove:
function goToLoggedOutChat(e)
{
e.preventDefault && e.preventDefault();
e.returnValue = false;
location.href = 'logged_out_chat.php';
}
mylink.onclick = goToLoggedOutChat;
To re-enable the link:
mylink.onclick = null;
To do it for every link on the page:
for (var i=0; i<document.links.length; i++)
{
document.links[i].onclick = goToLoggedOutChat;
}

window.open with popup blocker

I am trying to open a certain page from my default page.
All the code there is in the default page is:
<script type="text/javascript">
window.open("StartPage.aspx", "", "fullscreen=yes");
</script>
The problem is that the browser's popup blocker blocks this and I need allow the browser to open it.
I want to avoid this and that every one that will use my web application won't need to allow the popup blocker to open the page. I want to pass the popup blocker and open the page without permission.
Is there a way to do so?
Thanks
adamantium is right. a popup blocker would be pretty useless if it could be overridden by the code that's causing the popup. the best you can do is this:
<script type="text/javascript">
var myPopup = window.open("StartPage.aspx", "", "fullscreen=yes");
if(!myPopup)
alert('a popup was blocked. please make an exception for this site in your popup blocker and try again');
</script>
As others have stated, you simply can't. The browser is blocking that behavior. Another option would be to not use window.open but instead use a javascript component which can give you the same behavior.
You won't be able to do that. Its a user preference to block pop up windows and you have no control over that.
You can open popup using onclick event only. You can try submitting form with target="_blank" and action set to your url, but forefox blocked this, google chrome not.
I don't think that's impossible, everyday I see streaming pages opening popups all the time and mine's being blocked so it should be a way to bypass it

How do I open a form on page exit

I'm now dealing with a client request to open a form when the user leave the page.
Can that be done?
I think you are looking for
onbeforeunload event
An event that fires before the unload
event when the page is unloaded.
It seems to be impossible to create my own form and override onbeforeunload or anything else. I guess blocking it is the right thing though..
What we did is to pop a form and use the regular onbeforeunload. if the user wants to go - he will. But if he stays - he will get the questionnaire.
You can see the issue here too: onbeforeunload confirmation screen customization

Categories

Resources