We use both onbeforeunload and onhashchange to do two separate things:
1) onhashchange displays a special tooltip asking the user to use application controls for navigation
2) onbeforeunload is used to warn the user that they will loose data if they close the app or try to navigate away to a different URL altogether
This implementation works perfectly on all browsers but IE10. For some reason in IE10, onbeforeunload fires before onhashchange and it causes the wrong thing to display.
Is this a known issue? Is there something special about IE10 I need to know?
Implementation is in Dojo, if that helps...
Related
I tried onbeforeunload event but it's not working when leaving the page it's only working when I reload but every thing works fine on edge.
I think Chrome have changed somethings in configuration.
Is there a way to fix that or another method?
onbeforeunload = function(){
return("bye");
}
AND is there a way I can check if user is closing the page or redirecting to another url with out firing on reloading or can I not do that?
Even when using JQuery, a framework with the objective cross browser compatibility, they say:
The exact handling of the unload event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.
Source
So you have to accept an inconsistent behaviour.
You could try doing this:
window.onbeforeunload = function(e) {
return "Bye";
}
As you need to attach the event to the window
I have built a website that uses some simple JavaScript. I make use of many events throughout the website such as the input and submit event for validating and processing a contact form, the focus event for some form-related things and a dynamically-created tab interface, etc. I register all of these handlers using element.addEventListener("event", handler).
My JavaScript works wonderfully everywhere that I have been able to test (Firefox and Chrome on Ubuntu; Firefox and Chrome on Android), except for on iOS devices (regardless of what browser is used), where it seems that very few events are being fired.
It has been difficult for me to debug what the issue is on iOS devices because I do not have an OSX computer to connect an iOS device to so that I can use the remote console. I have come to the conclusion that the events are not firing for a few reasons:
The contact form on the website is being submitted even though I make a call to event.preventDefault() in the form's submit event handler, and do not explicitly submit the form anywhere after that.
I have tried catching any errors and displaying them in an alert like so:
window.onerror(function(err) { alert(err) })
to no avail (i.e. no errors were caught).
I have adapted all my functions to make use of only the click event, and then they work perfectly!
The last point is a possible solution to the problem, but I think it is bad practice to adapt all my work to one specific platform and rely only on a single event when there are so many purpose-built events that can be used and that are supposedly supported by iOS in the first place.
Why are so many events not being fired on iOS devices?
The problem was actually that I had made a const declaration in strict mode, which is, according to caniuse, not recognized in the current versions of both Safari and iOS Safari (9.1 and 9.3, respectively, as of writing).
I have better documented this problem in another question and answer.
I read these two questions:
How can I detect browser tab refresh or close using javascript
and
How do I detect a page refresh using jquery?
which suggest binding to 'onbeforeunload' and also binding on F5 and Ctrl-R key presses, which is good advice.
However, most browsers have a refresh button on their address bars, like this in Chrome:
Question is: is it possible to detect and bind to refresh event of browser's address bar's refresh button?
By binding onbeforeunload to windowlike this window.onbeforeunload it should trigger in most browsers. check this fiddle. It seems it's not supported on IOS devices.
For IOS apple docs suggest using pagehide see apple page on Handling Events.
The load and unload events may not work as expected for back and forward optimization. Use the pageshow and pagehide events instead.
Keep in mind that this will also trigger on all other kinds of navigation away from the page. Such as close, tab close, back/ forward navigation, link navigation and address bar navigation
Checking if the browser is reloading versus navigating away from the page I'm pretty confident is not possible, due to security/ privacy reasons not being able to give you the destination url. You could eliminate link presses by using it is an condition when firing the onbeforeunload.
Edit: If you need to check if the page has been reloaded however, you could use sessionvariables or cookies to store that the user has already opened the page once before.
I have a form and I must notice user with alert() on exiting page while there are data in the form that had not been send.
I've read that opera has a lot of problems with this. Opera 11 that is, because I need take into account only last version.
So again, the alert should display on refresh, closing a tab, or closing whole browser.
It would be nice to set event directly to the <form> element that would be launched on anything that leads to destroying this element.
Opera does not yet support onbeforeunload. Opera's onunload support is incomplete - for example, it does not fire when you close a tab, or close Opera. As far as I know, while you can use onunload to show a warning if a user clicks a link to navigate away from a page with an unsaved form, there is no way you can prevent the navigation from happening when the unload event fires.
What I would do here is to listen for the onbeforeunload event, make it work in other browsers and wait for Opera to catch up. Whether it will be in Opera 12 or 13 or 15 I don't know, but when onbeforeunload is implemented it will work like it does in other browsers already.
The Disable Close will not help you yet because Opera does not support window.onbeforeunload at the moment. It will be supported in some future version. For now, Opera 11 doesn't implement it.
onbeforeunload is now supported since Opera 15 !
The JQuery framework is only a condensed Javascript language so it depends entirely on the browser you use, no magic here.
I change the bookmark in the url when the page is loaded. That way, when the user clicks the back button of the browser, the browser will not actually go back, but will instead change the bookmark. I can then detect the bookmark change and do something else as a reaction to the user pressing the back button.
My problem is to find the current url, including any bookmark/hash changes. It works in all browsers, using a combination of the following, but not in IE8:
document.URL
location.href
window.location.hash
and the window.onhashchange
As it doesn't work for IE8, could anyone possibly point me in the right direction towards how I can detect the bookmark/hash change in IE8?
Look at jquery-bbq, as it implements the hashchange and makes it work in IE6-IE8 and possibly IE9 now. You could probably entirely rely on it instead of your custom code.
According to the author of the jQuery hashchange plugin, IE8 supports binding to the window.onhashchange event out of the box.
Perhaps you could try using Ben's plugin, which is intended to enable hash change detection on older browsers.
EDIT: My tests showed that the event is not firing in IE8. Then I found the following comment in above plugin's source code:
// Note that IE8 running in
// IE7 compatibility mode reports true for 'onhashchange' in window, even
// though the event isn't supported, so also test document.documentMode.
Apparently, I'm running in documentMode 5 which is quirks mode. I bet it works in IE8 standards mode only. Regardless, you should be able to implement the same JS code that Ben used.