How to JS function to catching Reload Button - javascript

How can i write JS function to catching a Reload Button (on browser) then i pressed on.
I want to pop up alert something like that.
etc. -> and back button too.
Thank you.

You just can't.
The only solution is to use window.onbeforeunload to catch when user leaves page - reloads or uses back.

You can't detect these directly, you can use onbeforeunload to handle any unloading, including closing the browser, for example:
window.onbeforeunload = function() { return "Are you sure?"; };
But you can't detect what caused it, e.g. closing would as well, so would going forward in history.

Related

Hook before refreshing a page

I have a page where a user can upload a bunch of files as part of a form. The files are uploaded to the cloud with each addition. If they cancel the form, the files are deleted from the cloud. If they refresh the page or close the browser before completing, I would also like to delete those files from the cloud. Is it possible to hook into these events?
The same way ytou have onload when the page load, you have unload when you, well, unload.
Confirmation before closing of tab/browser
How to show the "Are you sure you want to navigate away from this page?" when changes committed?
If you want to add an message before that, onbeforeunload seems to do the trick:
Implementing "this page is asking you to confirm that you want to leave"
<html>
<body onunload="javascript:alert('Beep!');" onbeforeonload="javascript:return confirm('I beep first. Continue?');">
Close me for an alert
</body>
</html>
*Disclaimer: This is a terrible example, do not inline javascript.
You are looking for window.onunload = myFunciton: http://www.w3schools.com/jsref/event_onunload.asp
Execute a JavaScript when a user unloads the document:
<body onunload="myFunction()">
You want something like this:
window.onbeforeunload = handler;
In the handler itself you also can return some string that is shown in the resulting alert box (which is always displayed by the browser, you cannot control that). However the return value does not work in Firefox which will ignore your message. Also note that you only can have one beforeunload handler.

Cancel redirect / beforeUnload

I'm using jQuery BlockUI plugin to display some nice ("Please wait...") message every time user changes URL, clicks link, is redirected, goes somewhere etc.:
$(window).on('beforeunload', function(){$.blockUI();});
Now, I'd like to enhance this message with a Cancel button, that would prevent such redirect and let user stay on current page. This leads me to a question: Is there any way in Javascript to stop URL change process, that is in progress? Or any other method/solution, that I could bind in this Cancel button's click event?
Am I trying to do something stupid or useless?
You could try e.preventDefault() or return false in the beforeunload bit but what you are wanting to do is not technically supported by browser for security reasons. Image the implications of an unclosable window...
The best thing to do is use the built in syntax. Returning a string to beforeunload pops up a dialog box asking if you are sure you want to quit, with that string as the question and the options "leave page" or "stay on page".
Example
$(window).on('beforeunload', function(){
return "Do you really want to leave this page?";
});
UPDATE
After further reading on this it turns out that major browsers support the return string syntax but Firefox does not. Firefox will simply replace your string with the line "Are you sure you want to exit this page?" or something like that.
TLDR: You can use the above return string syntax in all browsers but your custom sentence won't be shown in Firefox :)

How do I attach a Javascript event to the mobile Safari back button?

I need to show a confirm dialog box when the user clicks the back button in mobile Safari. I have a long application, and I want to alert users that their application has not been filled out/completed before they leave the page. I have everything set up for when the user clicks a link and tries to leave the page, but I can not for the life of me figure out how to attach an event to the browser's back button. onbeforeunload does not work in iOS. Any tips would be much appreciated.
NOTE: I realize alert boxes are the spawn of satan, but that's what I was told to do.
You can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache (user navigates back with back button) it is set to true.
window.onpageshow = function(event) {
if (event.persisted) {
alert("From back / forward cache.");
}
};
For some reason jQuery does not have this property in the event. You can find it from original event though.
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From back / forward cache.");
}
};
In desktop browsers like Chrome you can intercept the leaving of a page and show a message.
And you can't do anything, except for showing the message. The browser is doing the rest, for obvious reasons.
Dunno if this also works on iOS.
window.onbeforeunload = function () {
return 'do you really wanna do that?'
}
http://jsfiddle.net/JAAZ5/
Control over the back button has never been allowed in any browser. I suspect mobile Safari is no different.

Can I "redirect" user in onbeforeunload? If can't, how to?

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.

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