I'm having cross platform issues with Firefox and form submissions.
http://pastebin.com/BEFsBd8h
In the example, when the button is disabled and the page I'd directs to another location, firefox does keep the button disabled whereas other browsers do not.
I know I can use an onunload event to remove the disable attribute. But I'm wondering if there's another way. I've also tried by setting autocomplete off but alas it did not work
Reproduce bug:
Use firefox
Disable button
Use sudo-submit
Back button
The test button should still be disabled.
When Firefox traverses history, it will not always reload the page, but often will actually use a cached copy of the page with the same state from where you left it. So if a button was disabled when leaving it, then it will be disabled when "going back" and the page is still cached in the backward-forward-cache (bfcache).
Two options to deal with this:
Implement either pageshow or pagehide events. E.g. you could reset the DOM state in pageshow.
Implement handling of the unload event. This will disable the bfcache entirely, and therefore degrades performance, but is easier to do.
For more information, see the rather old, but still applicable "Using Firefox 1.5 caching" article.
Related
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 am facing issue with the way back button works in Chrome.
I have a application where I am displaying a form in iframe inside the parents window.
So when the user clicks on back button the behavior on IE and Mozilla is that page in iFrame loads up again.
This iFrame page refresh when the user clicks browser back button is important in my case is because we need to keep a track of users who have logged in the application and accessed that iFrame content.
Now in Chrome the behavior of back button is different. When the user clicks on browser back button the user is taken back to previous page.
I need to alter this behavior for chrome and need to refresh the content in iFrame instead of moving back to previous page.
Anyone kindly who have idea on this help me out.
PS: I cant use jQuery in application.
Regards,
Well the short answer is you can't and you shouldn't. becoz this behavior is inconsistent across different browsers and even future versions of mozilla and ie may also change it's behavior.
Still you have some alternatives to achieve this kind of behavior.
You can use HTML5's history.pushState where on hashchange event you can refresh you frame whenever you want.
I've made a single-page web presentation that changes it's content based on user events like clics, previous viewed content, source refers...
During usability tests I've detected that some users tend to use the back button and that leads them to the previous page, which is not what they want. They want to go back to the previous content.
As we are in the final stages of the production the easiest for me would be to create an event that fires with clics in the back button. The second easiest way would be to detect changes in the window.location.hash and fire an event.
I don't know how to do either.
It is necessary that this feature works in IE8+ FF4 and it's not that important on older browsers, as long as it doesn't compromise other features already implemented.
The page uses jQuery.
Use this http://benalman.com/projects/jquery-hashchange-plugin/ or http://benalman.com/projects/jquery-bbq-plugin/ this.
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.
How to use JavaScript to detect user operations on browsers such as click backward/forward/refresh button, keyboard inputs in navigation bar or search bar of FireFox, as well as any hotkeys for these operations.
You can't. Anything that happens outside the page content area is completely off-limits to scripting. (Thank God... it would be a security and usability disaster.)
About the only information you can get is that if an unload event happens without a link being clicked/form submitted, the user did some kind of navigation outside the page (such as window close, bookmark open, address entered, back/forward/etc). And if you really want to be obnoxious you can detect/prevent browser-specific navigation keystrokes like F5-for-refresh when the focus is in the window.
Well, for mouse/keyboard events on the page's DOM or the window, you can detect. The easiest way for me is using JQuery's event: http://docs.jquery.com/Events
Anything else e.g clicks on the browser toolbars/search boxes/3rd party components will be highly unlikely (I'm hesistant to say 100%).
Navigation of pages/url can be detected as well but not necessarily identified as back/forward or refresh.