I'm not sure how you can do this, but if a user on my site enters some information and selects another link or tab without saving, I would like to present a popup and allow them to cancel that action. If the action is canceled, I want to prevent the user from going to the selected link/tab.
Can you actually do this? I've thought about using onuload javascript event but I'm not sure how you could prevent the action.
This is a ASP.net site using jquery.
It's a rather imperfect solution, but this is as close as I could get.
Add this event handler to your page:
window.onblur = function() {
var flag = confirm("Please don't leave! Click OK if you really want to leave. I hope you click cancel and stay with me.");
if (flag) {
window.onblur = undefined;
alert("Ok you can leave now. **sob**");
//The user is leaving. You can do a little cleanup here if you need to.
}
}
Note: No solution in the world will prevent a user from opening another browser. Or, better yet, picking up their mobile phone and browsing from there. You can't force the user to remain focused on your app.
I strongly suggest you rethink your UX design if it really is so fragile that you can't allow the user to multitask.
Related
I want to notify the user to save changes (only if they do not click the save button) before they leave the tab. I found many examples on dirty page, jquery, onbeforeunload etc but every example notifies the user before they leave the page where as I want to notify before they change or move to other tab present in the navbar of the same page. Please help me out
Very basic, and it may not meet your needs, but it's kind of possible to achieve.
This method just detects the blur and focus events of window. Downside, it will also fire the alert when they click anywhere outside of the window. It's probably as close as you'll get to detecting tab changes unfortunately.
$(window).focus(function() {
//They are staying on the page
console.log("You've chocen to stay")
});
$(window).blur(function() {
//They're leaving the tab
alert("Sure you don't want to stay?");
});
Working Demo
On my form, a user can modify it, i.e. make it dirty, and then click the Cancel button.
The Cancel button's onClick() behavior is to change window.location.
However, when I press the "Cancel" button, I notice that the window.location only changes if I click "OK" (IE8) or "Leave this Page" (FF or Chrome). But, if I click "Cancel" (IE8) or "Stay on this Page" (FF or Chrome), then the actual window.location does not change.
How does this work?
EDIT including code:
function (buttonPressed) { // called when Cancel button is pressed
window.location = ...;
}
As #マルちゃん だよ said, you can't force a redirect if the user doesn't allow it. It just won't happen. However, the question that needs to be asked is what your "Cancel" action does, and whether you actually need to use Javascript for it.
If you want the cancel button to reset the entire form, there are ways to do that, either
Using a button with type=reset, or
Using the form.reset function
Alternatively, if cancelling is meant to take the user to a different location, then while the words may say cancel, the button is actually submitting the form and relocating them. So, make the button a type=submit, capture the fact that the form was cancelled (maybe even store it so the user can return to it later), and redirect them server side to the right page. This has the added benefit that you can track how many users are cencelling, and working when Javascript is turned off or unavailable.
What you are asking for would be a major security breach. I'm afraid you will never be able to do that.
You can, however, have control over child windows the parent has opened. Say you opened a popup with a parent window, that same parent window can have a button to close the child. Never the main window.
As for the "Cancel" event on that confirmation dialog, you could always handle it:
window.onbeforeunload = function () {
if (confirm('Are you sure you want to leave this page?')) {
return; // allow user to exit without further annoying pop-ups
} else {
// Handle the Cancel event
// ...
return "Do you really, really want to Exit?"; // Make the browser ask for confirmation again
}
}
If the user does something to leave the page, then you can tell the browser to ask them if they are sure. You cannot silently prevent them. If the user wishes to leave the page, then they can do so (dodgy sites full of adverts and/or malware would love it to be otherwise, thankfully it isn't)
How can I ask the user Are you sure you want to leave the page?
Like for example if you click the back button while asking a question on Stackoverflow?
The easiest way to do this is to bind an event handler to the "unload" JavaScript event. jQuery makes this very easy to do with its .unload() event handler. In the method you bind you can check to see if any the page's form fields have text input. Assuming they do pop an alert notifying the user they'll lose any unsaved data if they navigate from the page.
This method will fire an alert whenever the user navigates away from the page for any reason.
$(window).bind('beforeunload', function() {
alert('Handler for .beforeunload() called.');
});
That's obviously not very user friendly but a couple of quick modifications can make it workable to your question.
Is it possible to redirect to another page when the user closes the browser?
Attempts:
I tried onunload, does not work
window.onunload = function redirect(){...}
I also tried another method, it doesn't work either:
window.onbeforeunload = redirect(){...}
<body onbeforeunload="return false; redirecty()">
The 3rd method, I want to cancel the onbeforeunload (means delay closing the browser), the I call the redirect function, window.confirm, if yes redirect, if no then close the browser. But it does not work as well.
Is there any other way?? Maybe prompt to let user select whether to redirect to new page when he/she close the browser? I'm running out of ideas...
Your onbeforeunload event needs to return a string (that doesn't equate to false), the browser will include this string in its own message displayed to the user.
window.onbeforeunload = function(){
location.assign('http://www.google.com');
return "go to google instead?";
}
However, it's going to be really tricky to word your message in a way that the user would be able to understand what to do. And I'm not sure this is robust in every browser, I just tried it in Chrome, it worked, but I ended up with a tab I could not close! I managed to kill it via the Chrome task manager thankfully.
It's not without it's faults but it works
window.onbeforeunload = function(){
window.open("http://www.google.com","newwindow");
return "go to google instead?";
}
This will open a new window as a popup to the address you selected when the user closes the page, though it is limited by any popup blockers the browser may implement.
If the user is trying to close the browser, then his intentions are pretty clear; he expects that the browser will close. Preventing that from happening, or causing anything else to happen in between the user clicking on 'close' and the browser closing is just a bad idea IMO. Is there a special reason for this? I mean, when I click on the 'close' button I expect that the browser will close, and should anything else happen, I would find that extremely annoying. I think I'm being reasonable enough. Am I? Who knows such things.
Why don't you try to entice the user to visit the other page in a less intrusive way? Like with a link or a banner?
The simple answer is no. If browsers allowed you to do more with the onbeforeunload/onunload events, this could be used pretty maliciously by anybody.
I have a simple logon page. When the user is validated, the window navigates to a new page. The javascript is window.open('http://www.google.com',"mytest",'toolbar=no'); My expectation is that when it navigates away from our logon page and opens the google site that the back button would be disabled. But it's not. Does anyone have any idea why?
It depends on your browser. Ultimately, all you can do with javascript's window.open() is tell the browser what you'd like it to do, but it's not obligated to do it. Browsers can and do ignore some directives based on user preferences.
I believe the option your looking for is 'location=no', as that hides the address bar and therefore the back button too. The toolbar is things like favorites/etc.
This is bad practice - what happens if the user has javascript disabled? If the browser prevents the js from removing the toolbar of the main window?
Instead, amend the logon page to detect whether the user is logged in before showing the login form. If logged in, show a message saying so instead of the form - that way, a user clicking back won't be a problem.
I find it very annoying when a website messes around with my browser window, and generally don't come back.
This is what worked for me. Instead of disabling the back key. I listen for on unload event. I then write the following in javascript:
window.onbeforeunload = function () { return "You should not press the back button while in this application. If you continue, your work will not be saved and you will need to log back in."}
Java Script pops a dialogue box with OK and Cancel options. If the user clicks cancel. The application stays right where they are. The script is embedded within the tags. For me this is the ideal solution. I found this at
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript