Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onbeforeunload doesn't seem to work in Safari or Chrome

I am working on this page: http://www.weloveflyers.co.uk/order.php

After someone has entered their order details and click "Let's Go!" the order information is captured, displayed for them to check and then a "Pay Now!" button appears at the bottom (try it, you don't have to pay anything, just so you can see what I mean)

I don't want to hinder anyone leaving the page BEFORE they click the Let's Go button, but if they have already clicked "Let's Go!" (ie. placed an order) but have NOT yet clicked "Pay Now!" I want to be able to check with them "Do you really want to leave? If you leave without paying, your order will be cancelled!"

Before I get into the complication of making sure it only functions when an order has already been placed, I tried just a very basic onbeforeunload setup just to see if the browser would support it. I seem to get sporadic support for this function in Safari, generally it doesn't work, but very occasionally it does, and in Chrome it just doesn't work at all.

Any help or advice anyone can offer would be gratefully received!

Thanks,

Phil

P.S. For your info, I have removed all onbeforeunload functionality from the live page for now, because I don't want to annoy visitors until I've got it right and it does exactly what I want.

UPDATE: Here is the latest attempt:

var needToConfirm = true; 
window.onbeforeunload = confirmExit; 
function confirmExit() {
  if (needToConfirm) 
    return "Message";
}; 
like image 515
Philip Osborne Avatar asked Jul 28 '11 02:07

Philip Osborne


People also ask

What triggers Onbeforeunload?

The onbeforeunload event occurs when the document is about to be unloaded. This event allows you to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page.

How does beforeunload work?

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.

How do I unsubscribe from Beforeunload?

Cancelable: The beforeunload event can be canceled by user interaction: // by https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Example window. addEventListener("beforeunload", function(event) { event. preventDefault(); // Cancel the event as stated by the standard.


1 Answers

As per the MDN documentation, I just tried the following in Chrome 11 (and 13) and Safari 5 on OS X, and in Chrome 14 on Windows 7, and it works fine for me (as does your code above!):

window.onbeforeunload = function (e) {
  e = e || window.event;

  // For IE and Firefox prior to version 4
  if (e) {
    e.returnValue = 'Any string';
  }

  // For Safari
  return 'Any string';
};

What happens if you use the code above in your page, exactly as it is?

What versions of Chrome and Safari are you using?

like image 92
Sam Dutton Avatar answered Sep 30 '22 14:09

Sam Dutton