Cancelling in beforeunload event handler leaves browser URL changed - javascript

I am using the beforeunload event to get users to confirm that they want to leave my web page (and lose their input). It works fine except for one case: if they try to navigate away by typing a new URL into the address bar, and then cancel, they remain on my page but the address bar still shows their new destination.
This is harmless but annoying, so I am looking for a way to set the address bar back to my URL, without causing a refresh.
This is my code:
<script type="text/javascript">jQuery(window).bind('beforeunload', function () {
return 'This will end your session.';
});
</script>

You can't programatically change the content of the address bar unless you actually send the user to a new page. If you could, phishing would be much, much easier. "Hmm, the browser says I'm at https://safebankingsite.com, I guess it's OK to enter my SSN."

I even tried adding an anchor to the page:
Change Location
Clicking that does not even fix a deleted address. I would think this verifies you can't do it.

Related

How can I replace window.onbeforeunload with custom code?

For accessibility reasons, for my Chrome extension, I need to be able to replace all standard window.onbeforeunload popups with an in-page HTML substitute. I know how to create a substitute skeleton, that's trivial.
And I know the basic idea here is window.onbeforeunload = {my substitute code}.
What I don't know how to do is grab the text and code from each confirmation window that a page issues, and channel it into my substitute, so that the same message is shown as would be in the original popup and clicking my substitute confirm and leave page (or whatever) buttons yield the same result as the original popup.
How can this be done?
EXAMPLE:
You have my extension installed (don't ask what its purpose is, irrelevant).
You start writing a question on StackOverflow, then realize you already know the answer and go to close the tab.
Normally, a confirmation window would come up asking if you're sure you want to leave the page.
But because of my extension, instead, the whole page's HTML gets shoved down a bit to make room for a temporary HTML confirmation box is shown with the same text and the same two buttons that yield the same two results when clicked, all in-page. No pop-up.
The feature you're talking about is the window.onbeforeunload event, and unfortunately the only way it can be customized is to provide a custom string message for the user, because the potential for abuse is so high.
The api reference over at msdn for Internet Explorer states:
The default statement that appears in the dialog box, "Are you sure
you want to navigate away from this page? ... Press OK to continue, or
Cancel to stay on the current page.", cannot be removed or altered.
I take this to mean the dialog itself cannot be altered, all you can do is provide an additional context-specific message. I cant locate the same reference for Chrome, but it seems to be the same story there.
window.onbeforeunload = function() {
//all you can do is provide a message..
return "you have unsaved changes, if you leave they will be lost";
}

What's window.onunload?

Im a beginner and i see that line of code a lot on javascript files , for example :
window.onunload=function(){};
when should i use this and what is it role exactly ?
thank you .
This function gets called when the user closes the browser or navigates away from the page.
https://developer.mozilla.org/en/DOM/window.onunload
You also might want to check out onbeforeunload, which allows you to prompt the user with a confirmation message before leaving the page. This can be useful for reminding the user to save their changes, or making sure the user doesn't actually want to claim their free iPad 2.
onunload is an event that is triggered when the user navigates away from your page, or when the page is "unloaded".
It's triggered when a user follows a link, or closes the tab. It's used for clean up. Like saving a user's data when they leave the page. Usually it's paired with onbeforeunload (which is called before onunload is using the same criteria) to warn a user that they have unsaved data.
if a page has an onunload handler, browsers that restore the page state (remembering changed form field values, script environment) when you navigate away and back to the page do not-
that is, they load the page as if it was the first time it was opened, with no user applied changes.

Using Javascript in Firefox add-on to get what is currently typed into the url bar

I'm writing a Firefox add-on and trying to get what is currently typed into the address bar, but every time I try, I get a null error. The code I'm using is
var url = document.getElementById("urlbar").value;
However, when I do that, the error I get is
Error on line 1: document.getElementById("urlbar") is null`.
I have a blank tab open with text written into the address bar. This is in firefox 3.6.9 .
Any help would be appreciated. Thanks!
Edit: If there is no way to get the contents of the URL bar, before the user presses enter, is it possible to "intercept" what they typed after they press enter?
You can't hook into what is typed in the address bar until the user submits it. Once the user submits text, you have two options:
If you're writing an extension, you can hook into an event when the url changes
Use window.location.href to pull the url of the page loaded in the browser.
var url = document.getElementById("urlbar").value;
That works, as does gURLBar.value.
The question is what context you run that code in. You should be running that code in a browser.xul overlay and after the browser DOM is loaded.
Also, yes it's possible to intercept what the user typed after they press enter, but there's not a public API for that, so you'd have to figure out how the relevant code in Firefox work and replace the part that's responsible for handling Enter in the location bar. [edit] see Firefox addon to do something everytime a user hits Enter in the address bar
getElementById gets a DOM element with the specified ID. The address bar isn't a DOM element.
You want:
var url = window.location;
The closest thing to what you want is window.location.href. However, it's not a perfect accessor for what is in the URL text box, as you will find that typing into the URL box but not pressing "enter" will not modify window.location.href. As far as I know, there is no way to access the text value directly.

JavaScript problem toolbar=no

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

JavaScript To Get An Alert To Redirect When Closing The Browser Window

I'm trying to get this JavaScript to work properly. My intention is, when a user is trying to close the site page to get an alert saying "stay on current page or close" If they hit 'ok' I want it to close, if they hit 'cancel' i want it to redirect to another page. The problem is, when they try to go to another page on the same site, it gives them that popup. I want it to show only when closing, not when leaving the page to another page. I'm not sure if that's possible, I do appreciate your help and comments.
window.onbeforeunload = fget;
function yPop(url) {
var found = 1;
window.onbeforeunload = '';
window.location = url;
return false;
}
function fget() {
alert("Thank you for visiting our website, you are welcome any time! \n\n");
window.location = "http://NewLink.com";
return "\n________________________\n\n PRESS 'CANCEL' To Stay On The Current Page \n\n________________________\n";
}
The problem is, when they try to go to another page on the same site, it gives them that popup. I want it to show only when closing
Don't do this.
You can't detect closing only, but you can tell the difference between leaving by clicking on an internal link and other kinds of leaving, including external links, back button, closing and choosing/typing a new URL. In a script after the page has loaded, set the onbeforeunload event, then scan over all the document.links and test their .host against the current location.host. If they match, it's an internal link. In this case add an onclick event to them that removes the onbeforeunload event before returning true, allowing the link to operate normally without a warning.
Seriously, don't do this. It is incredibly irritating, arrogant and useless. Webmasters who employ leaving-pester scripts are condemned to the the fourth circle of internet hell, where they must spend the rest of eternity making stylesheets work on Netscape 4 using only ed, a worn toothbrush and a < layer>-tag.
you should use the window onbeforeunload Event.
http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
https://developer.mozilla.org/en/DOM/window.onbeforeunload
for jquery users :
$(window).unload( function () { alert("Bye now!"); } );
You may want to consider building a "You're about to leave this site" page instead.
The idea is that you wrap URLs on the page that aren't on your site to point to that page, letting the visitor know they're about to leave, and giving them a chance to go back, or proceed.
It's gentler than an unexpected modal dialog, it lets you format your messaging better, and it ultimately gives your users the exact same choice.

Categories