Show popup when closing browser

Question

I am developing an e-commerce website (PHP), and here is my requirement.

As soon as the customer leaves the order page or closes the browser, I would like to offer another product with a pop-up window or a warning field. If they select "Yes", it is redirected to another product page instead of closing the window.

I tried with javascript window.open () in the body onunload event. But browsers block it.

Is there any way to do this?

Thanks Den

Answer 1

First of all: it is not at all convenient. Just as @Dagon said, no one wants to be restricted by leaving a page and then showing spam on various items being sold. With that said, I'm sure you have a legitimate reason, or rather, they are told to do it. So here is my answer ---

There is no way to do this with the onunload event. After this event is fired, there is no way to redirect or cancel the unload, since it is literally on the unload event.

Your best chance to do this would be in the onbeforeunload event. This is the only event that actually pauses the onunload event and can also cancel onunload from execution. The onbeforeunload event has two different results.

• If you return something in the onbeforeunload event, a default dialog box will appear with the text inside when the user tries to jump. User can click OK or Cancel. If they click "OK", the browser will continue navigation. If the user clicks Cancel, the onunload event, you guessed it, is canceled. Surprisingly, this is the only way to cancel the onunload event without binding.
• If you do not return anything, your code inside the onbeforeunload event will fire without knowing the user. (This code should be relatively short, because the onbeforeunload event does not allow much time.

An idea that you might want to try (I never tried to do this) is to try adding a hyperlink to the return statement from the onbeforeunload event. Again, I don't know if this will work.

The following is a very simple example of the onbeforeunload and onunload events:

<script type="text/javascript"> //may not be neccesary for your code window.onbeforeunload=before; window.onunload=after; function before(evt) { return "This will appear in the dialog box allong 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> 

I know that you want to create a warning or a pop-up confirmation, but it also has some problems. A typical programmer does not have access to the source code for the onbeforeunload and onunload events, so no one is 100% sure what they are doing. From my testing, I know that it seems impossible for a custom popup to be displayed only once, and also execute different code.

If the user closes the webpage, this is the only capture method that is in the onbeforeunload event. There is no way out of this. If the user uses the back button, the onbeforeunload event is also triggered there. I know what your ultimate goal is, but I have a suggestion, if that is permissible, of course. Try linking links or buttons on your page. If it is absolutely necessary that this pop-up window, the only reliable way to do this would be to attach the pop-up window to the links / buttons that are on your web page. But, of course, this will only work if they try to navigate your links (which will be a little more convenient for the user), but if they try to navigate external links (for example, favorite links or closing the browser), then this will not be executed.

Good luck in your endeavors. Onbeforeunload and onunload are complex.

Answer 2

The same thing on my portal. When the user closes the browser, I need some time to delay the reload of some data. The code I use below works for me. When a user closes a view, tab, or tries to redirect to another page, a message will be displayed for the user to choose a stay or vacation.

 var validNavigation = false; function wireUpEvents() { var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation var leave_message = cmsLeaveMessage; function goodbye(e) { validNavigation = isUserLoggedIn == 0 ? true : validNavigation; if (!validNavigation) { if (dont_confirm_leave!==1) { if(!e) e = window.event; //e.cancelBubble is supported by IE - this will kill the bubbling process. e.cancelBubble = true; e.returnValue = leave_message; //e.stopPropagation works in Firefox. /* if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } */ //return works for Chrome and Safari $.ajax({ url: linkResetTask, type: 'POST', dataType: "html", success:function(){ init("Employee"); } }); validNavigation = false; return leave_message; } }else { validNavigation = false; } } $(window).bind('beforeunload', goodbye ); // Attach the event keypress to exclude the F5 refresh $(document).bind('keydown keyup', function(e) { if(e.which === 116) { validNavigation = true; } if(e.which === 82 && e.ctrlKey) { validNavigation = true; } }); } // Wire up the events as soon as the DOM tree is ready $(document).ready(function() { wireUpEvents(); });