<html>
<body>
<button type="button" onclick="clickme()">Click Me</button>
<script>
var test = 0;
function clickme() {
test = 1;
console.log(test);
}
window.onunload = function() {
alert("test");
}
</script>
</body>
</html>
I'm using this simple code to test some things with onunload and onbeforeunload. For some reason whenever I refresh/leave the page and cause the onunload event I get no alert and an error in the Firebug console. If I use onbeforeunload this works and I get no error, but I hear onbeforeunload isn't very good cross-browser.
NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111
(NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert]
alert("test");
I am not trying to alert the test variable, just the text "test" before anyone tries to point that out.
If you want that to work, it will have to be in the onbeforeunload event, but instead of creating an alert/confirm pop-up, the onbeforeunload event has a built in pop-up. All you have to do is return a string and the pop-up will appear when the user tries to navigate away from the page. If there is no return variable, there will be no pop-up.
The great thing with this is that the pop-up message has 2 buttons: OK and Cancel.
If the user hits OK, the browser will continue to navigate away from the page
If the user hits Cancel, the browser will cancel the unload and will stay on the current page
The onbeforeunload event is the only pop-up that can cancel the onunload event
An example is below:
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
return "This will appear in the dialog box along with some other default text";
//If the return statement was not here, other code could be executed silently (with no pop-up)
}
function after(evt)
{
//This event fires too fast for the application to execute before the browser unloads
}
</script>
It seems like you are trying to do an alert in the onunload event. The issue here is that it's too late. The page is already unloading and there is no stopping it. You may be able to get an alert message to show, but it doesn't matter what the user clicks because the page is already unloading.
Your best bet is to go with the onbeforeunload event.
Related
I am trying following code to confirm user if they really want to close window.
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. Are you sure?";
}
</script>
But it does not work when my page load and I try to close page [X] without clicking anywhere on page. Yes it does appear when I click somewhere on page then close [X] window. I don't know why do I need to click somewhere on page and then close window.
What I tried so far but nothing works.
window.focus() on document ready as it gets focus on window.
$('#someElementOnpageId').click() as it gets auto click on document
ready.
Can anyone please suggest what should I do?
It's showing dialogue and after some second dialogue is hiding.it navigate to another page.
I want to stop navigation and when i complete my work in dialogue. press ok(button) then it continue to navigation.
I write jquery in page
$(window).bind('beforeunload',function(){
var continued=document.getElementById("Form:testID1").value;
if(continued==="true"){
PF('dialogwidgetvar').show();
}
});
//I tried this one as Suggestion
function f(){
var continued=document.getElementById("Form:testID").value;
if(continued==="true"){
PF('dialogWidgetVar').show();
}
}
window.addEventListener('beforeunload', f(), true);
You can't do any work at this moment in/from the onbeforeunload, that is by design in the html specs. Firefox won't even show your custom text anymore.
See also:
How can I override the OnBeforeUnload dialog and replace it with my own?
Problems with onbeforeunload
What you need to do is hook into the window.onbeforeunload and return a message from there. The string returned from that function (event handler) is displayed in a prompt (messagebox). Have a look at the following for further details of this event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
Here's a working sample
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onbeforeunload
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<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>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
I am developing a project where user gets a conformation page. I want user not to click back or close tab or reload.
Now either I need to disable the browser features or get back button,tab close event, or reload event to java script so that I could take the needed steps to prevent my data to get lost.
I have used this:
window.onbeforeunload = function()
{
return "Try This";
};
But this get called even when I click a button that redirects the page.
If you just want to have the alert, understanding that the user is ultimately in control and can bypass your alert, then do what you're doing but use a flag that disables it when you're navigating and don't want the alert. E.g.:
var warnWhenLeaving = true;
window.onbeforeunload = function() {
if (warnWhenLeaving) {
return "your message here";
}
};
then in a click handler on the link/button/whatever that moves the user on that you don't want this to pop up on:
warnWhenLeaving = false;
In a comment you asked:
can i know that what user has clicked when alert is generated with this function. That is can i know what user has clicked (leave this page/stay on page)
The answer is: Sort of, but not really; you're almost certainly better off not trying to.
But: If you see your onbeforeunload function run, then you know the user is leaving the page and the browser is likely to show them your message. The browsers I'm familiar with handle the popup like an alert: All JavaScript code on the page is blocked while the popup is there. So if you schedule a callback via setTimeout, you won't get the callback if they leave and you will if they stay:
window.onbeforeunload = function() {
if (warnWhenLeaving) {
setTimeout(function() {
display("You stayed, yay!");
}, 0);
return "No, don't go!";
}
};
Live Example
So in theory, if you get the callback, they stayed; if you see an unload event, they left. (Note that there are very few things you can do in an unload event.)
I've tried that on current Chrome, current Firefox, IE8, and IE11: It works on all of those. Whether it will work in the next release of any of them is anybody's guess. Whether it works reliably on mobile browsers is something you'd have to test, and again could change.
I used this code:
<script type="text/javascript">
function finish()
{
alert("Inserted!");
}
</script>
I want when the user clicks on "OK" of alert,it goes to another php page.
how can I undersatand when user clicks OK?
and how I can link to another page?In common I use this way:
<button type="submit" onclick="window.open('home.php')"> Insert </button>
but in alert example there is no button!
thanks
alert() is blocking: The browser will stop executing any Javascript code while an alert() is being displayed. The next line of code after the alert() will only be executed when the alert box is cleared.
Therefore, you don't need to do anything special to tell if an alert has been cleared; just put the rest of your code to run after the alert().
There is no result to alert. You can use window.location to redirect.
function finish()
{
alert("Inserted!");
window.location = 'newpage';
}
how can I undersatand when user clicks OK?
alert() is blocking, script execution pauses while it is displayed. When the user clicks OK, the script will continue running. Just put whatever other code you want after the alert statement.
and how I can link to another page?
You can set location to a new URL…
location = "http://example.com/";
… but generally speaking, you would be better off running the function as a click event handler of a regular link.
You can redirect by calling window.location=URL.
Alert is modal, it just gives information and then is dismissed. The script will continue executing after the alert message is dismissed.
If you want to just redirect after the user reads the alert message, you could use:
function finish() {
alert("When you click OK you will go to a new page.");
window.location = "http://www.yoururl.com";
}
On the other hand, Confirm gives the user a question and returns true/false based on the user response. This is probably what you should use instead.
In this case your function could look like this:
function finish() {
var continue = confirm("Finish and go to the next page?");
if (continue) {
window.location = "http://www.yoururl.com";
}
}
With either finish function, just attach it to the button however you want. The most direct way would be like you've done in your question:
<button type="submit" onclick="finish()"> Insert </button>
Note, though, if your button is in a form and you bind with onclick, the form is actually going to be submitted anyway unless you bind to the submit event and prevent it.
I have a web page which has a ajax modal popup being loaded inside it.When the modal popup is there we need to restrict the user from closing the browser.we have handled the onbeforeunload event but it showed a popup "are you sure you want ot leave this page".How to supress this popup and stop the page from closing.
<script>
window.onbeforeunload=function() {
window.alert("Hai");return false;
}
</script>
Unfortunately you can never prevent a browser window from being closed as that would lead to all kinds of abuse (imagine a porn site opening a window you cannot close).
The onbeforeunload eventhandler should return a string that could explain to the user what will happen if he closes the window, as the returned string is shown in the confirmation box. E.g:
window.onbeforeunload = function() {
return "If you close the window your unsaved changes will be lost!";
}
That string combined with the non-overridable confirmation dialog with OK and Cancel buttons will hopefully steer the user into making the right decision.