I have a seemingly simple requirement but I have been stuck for days. Can someone give me a hand?
I need a confirmation prompt if the user tried to close the pop-up window
if the user click ok to close, I need to call an ajax call
My original design is to add an onbeforeunload event handler, have it returns a string which triggers a prompt. Works perfectly.
The problem is the next part. Added a unload listener, a pagehide listener, and a visibilitychange listener - in all three cases, Chrome doesn't fire the event if the user close the window, only if I refresh the window. Firefox works perfectly. I am using a sendbeacon call which should work in these scenarios and if I add a breakpoint to pause before the window closes, the beacon is sent, so it seems like Chrome is closing the document too fast and never bother sending the last beacon, which makes the whole exercise pointless.
Has anyone face similar issues and if so, any way to work around it?
I'm struggling with the same problem.
Reading about the event on the documentation I've noticed that it is an unstable event, and moreover in the compatibility table, Chrome is set to "not supported".
But I noticed that chrome fire the event one time only.
If I close the browser and then i re-open it, the first time the event is fired, but it not work with tab closing.
Related
Context :
I have developped an application which require authentification. This application uses events for dialoging with a server. When the server answer, some events are send to the client (UI).
Problem :
When the user close the page, it is necessary to make a logout on the server. With my architecture, it's easy to call a method which perform this logout. But i would like that the user show the logout progress before closing the webpage. In fact, i would like to close the webpage only when a specific event (for example : disconnection_success), is well received.
Moreover, it's verry important to not launcg another webpage because event is received on the first webpage when the logout is successfull. (Because dialog is done throw XMLHttpRequest)
Test :
I already do some test using onbeforeunload but it seems that is difficult to customize the popup.
Do you have some ideas to resolve the problem ?
BR
There are some issues with this, but you're on the right track. You're right in that you should use onbeforeunload because it is the only event that you can have triggered upon the closing of the browser window. (I know you can use onunload but at that point you have no time to do anything.) The issue here is how much code do you want to execute. The onbeforeunload doesn't allow you much time before it starts to unload the page.
BTW, there are two different scenarios with onbeforeunload:
If you return a string inside the onbeforeunload event, it creates the pop-up that you were referring to. The issue here is that with the pop-up, you won't have enough time to execute code
The other option is not returning anything. Instead, call your logout methods. This should give your code enough time to execute before closing
I actually had a question very similar to this and ended up solving it myself: How to logout during onbeforeunload/onunload using Javascript
In your question you state that you want to have a progress bar displayed when they log-out. This is impossible to do when the user closes the browser. At the moment they close their window, you have lost all control, except for in the onbeforeunload (and onunload but don't use this), and that is why your code needs to be executed there. With that being said, you could anchor your logout button (I'm assuming you have one on your application) and have it display the progress bar.
Just think about what could happen if you actually did have that kind of control - where you could pop up windows and progress bars when the user is trying to close their browser window. You could pop up anything and restrict the user from having any reliable functionality. That is why it was programmed that the onbeforeunload (and unload) events are the only ones possible to access the closing of a browser. These events have some pretty strict guidelines to them that prevent any kind of possible mis-use. I understand the problem you're having, I was there and it stinks, but I think that is your only option if you were going to use onbeforeunload.
I've noticed a strange issue with how Chrome handles javascript focus event. The fact is, it continuosly triggers focus event, even if it occurs only once. I've made a bit of research here and found questions where people run into the same issue when using alert(). When they close the alert window, the focus returns to their inputs and a handler triggers again and again. In my case, the problem is different, as I am using console.log(), and from time to time I get the same log 2 or even 3 times. I've noticed it usually happens when I clear the console, and then focus on an element. When I try to repeat it, it does not occur any more.
The scenario:
Clear console
Focus on element (2 or 3 console messages)
Focus on other identical element or unfocus and focus again on the
same one (no problems)
Clear console
Focus on element (2 or 3 console messages - the problem is back!)
I've created a jsfiddle, please check it out:
http://jsfiddle.net/ffuWT/3/
The question is, what is the reason for this issue and how can I work around it?
Creepy how these things can happen. I've run into this exact issue at work today, but have quickly written this off suspecting dodgy event listening and propagation in a 3rd-party plugin (jQuery customInput). I'll double-check your jsfiddle tomorrow.
I'm unable to recreate your exact output on my currently available setup (Chrome v17 on a Mac) but I do have a theory to share. In your scenario and in Ben Lee's comment the consistent part is shifting focus to another window (console in your case).
Check out http://www.quirksmode.org/dom/events/blurfocus.html under "Window + focusable element":
If the window is sent backward while a focusable element is focused,
blur events should fire on both. If the window is brought forward
again, focus events should fire on both.
And next, in the compatibility table it's noted that
Safari Windows fires two focus events.
Maybe Chrome finally got this "feature" too, coming from the Webkit family and all?
I was able to recreate the problem (using your jsFiddle) and from what I can see it only occurs when you click the select without having focus on/in the result frame.
Click within the frame but not on the selects before you click to expand one of the selects and you´ll only see one line logged.
You can also append /show to the jsFiddle URL to view the result in a separate window.
It seems like focusing the window by clicking on a select control triggers the event multiple times.
Open this demo and unfocus the browser window (by clicking the desktop, taskbar or another window) and then click on one of the selects to expand its options and view the console.
Using Chrome 17.0.963.79 m.
I'm trying to do something every time a new tab opens up, both via firefox starting and when a new tab is added after firefox starts. I've been following the example at:
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
So I have
var container = gBrowser.tabContainer;
container.addEventListener("TabOpen", tabAdded, false);
container.addEventListener("TabClose", tabClosed, false);
function tabAdded(event) {
alert("tabAdded!");
var browser = gBrowser.getBrowserForTab(event.target);
browser.pollingService = new PollingService(createGuid());
browser.pollingService.start();
}
And I have a similar function for the close. This works fine for when tabs are actually opened/closed, but I've run into a couple of problems.
Firstly, when Firefox opens, it has that initial tab already open, but the tabAdded event never fires for it. Similarly, when I shut down firefox, it never fires the TabClose for those tabs.
It seems like the correct thing to do in this case is to go through all of the tabs that are in the gBrowser.tabContainer and add my service to them as well, and do something similar for when Firefox closes. Unfortunately, I'm not quite sure how to hook in to know when Firefox closes (It's also possible there's a much better way to handle this, but I can't think of one).
Secondly, gBrowser.tabContainer can be uninitialized sometimes when my initialization script runs; is there a particular event I should be listening to to know when I can safely add listeners to the tabContainer?
Use a load event listener to give the window time to be ready for you to add your Tab event listeners and create the polling service for the existing tab. Then use an unload event listener to do your cleanup.
Currently I am developing a web application for which I am using a pre-loader icon. What I want is that the pre-loader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:
window.onbeforeunload = function() { $("applicationdisabler").show(); };
For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.
The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.
Of course I have been looking for some workarounds already. The following code shows the alert in IE7, but the div still doesn't become visible.
window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };
The code of my div:
<div id="applicationdisabler"><img src="images/preloader.gif" /></div>
Hopefully someone can help me out.
You need to put the # before the id on the jQuery selector:
$("#applicationdisabler").show();
Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.
Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.
As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.
That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.
Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.
So either:
Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
Use the onLoad event of the next page to show the preloader image instead
Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.
Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.
is there a way differentiate between refresh and close in Javascript? i use window.onbeforeunload now which works great in IE. To void this being called anywhere but close, i set a flag on EVERY button ...this seems like a difficult, hacky solution, but after searching for hours on google, it was the best i could find.
Isn't there an onclose event for IE????? or onclick?
I only need to support IE, not FF, so please don't post anything FF related, I can't use it.
Thanks!
As far as I know there is no way to trap in JavaScript the click of the X (close) button in any browser. In my opinion this is due to security concern... JavaScript can't (an will never be able to) listen to OS messages like the close of the current window.
The only solution I know (which is what you seem to use) is:
<body onunload="alert('Fired');">
But as you find out if fires on close and on reload. Again this is normal behavior because, AFAIK, for the JS engine a reload is the same as a close then a reopen of the same page.
AFAIK, no there is no IE specific onclose event.