Firefox is firing onchange events in my webapp after tab restore.

When reloading the same URL in Firefox there is no problem, no onchange events get fired on page load, all changed values since last visit are displayed correctly.

But when reopening the same page with the same URL, after closing Firefox and reopening the page with "restored tabs" (from the Firefox option "show my windows and tabs from last time") then it is firing onchange events for all values that have been changed since last visit.

Actual workflow ot reproduce the problem:

1. My update events are in background (JavaScript/AJAX) and are fired with onchange events;
2. Firefox setting "show my windows and tabs from last time" enabled;
3. Change some values in my page (select fields);
4. Close Firefox;
5. Open the same URL on another browser or puter, and change some values;
6. Reopen Firefox, select the tab with the page on it, it reloads and fires onchange events again for all changed values since last visit.

Tried to reproduce this behaviour with pletely different pages (not created by me and using other script libraries and stuff) and the result is the same, it is always firing the onchange events.

Chrome is not doing this with the "restore tabs" option.

Why is it firing onchange events? How can I prevent it?

Firefox is firing onchange events in my webapp after tab restore.

When reloading the same URL in Firefox there is no problem, no onchange events get fired on page load, all changed values since last visit are displayed correctly.

But when reopening the same page with the same URL, after closing Firefox and reopening the page with "restored tabs" (from the Firefox option "show my windows and tabs from last time") then it is firing onchange events for all values that have been changed since last visit.

Actual workflow ot reproduce the problem:

1. My update events are in background (JavaScript/AJAX) and are fired with onchange events;
2. Firefox setting "show my windows and tabs from last time" enabled;
3. Change some values in my page (select fields);
4. Close Firefox;
5. Open the same URL on another browser or puter, and change some values;
6. Reopen Firefox, select the tab with the page on it, it reloads and fires onchange events again for all changed values since last visit.

Tried to reproduce this behaviour with pletely different pages (not created by me and using other script libraries and stuff) and the result is the same, it is always firing the onchange events.

Chrome is not doing this with the "restore tabs" option.

Why is it firing onchange events? How can I prevent it?

• javascript
• html
• firefox

• can I use firefox on the other puter at step 5? – loli Commented Jun 9, 2015 at 16:47
• yes, just change the values of the content (select) somewhere else, other puter with any browser or different browser on same puter. Then start firefox again and click on the tab to 'restore' (not exactly reload) the page ... select will fire onchange event. – 4nti Commented Jun 9, 2015 at 16:51
• 1 you could post about it on bugzilla, maybe you would have more success – loli Commented Jun 9, 2015 at 18:29
• 1 Firefox's Session Restore AFAI understand reloads the DOM and then changes it according to the saved data from form elements. This is likely what triggers the onchange event. I believe this bug report is very similar to what you are describing: Bug 464691 - Restoring the session overwrites form data with updated defaults. Unfortunately I am not sure what to do about it, maybe try adding CSRF tokens? – Niklas Brunberg Commented Jun 12, 2015 at 17:24
• 1 If you can put some sample code to reproduce the problem then more people can try and will be easy to look into problem. – hagrawal7777 Commented Jun 17, 2015 at 10:20

2 Answers 2

A few suggestions on how to deal with this depending on the wanted result. Note that this is tested on my machine, behaviors may vary. They way it seems to work is that Firefox tries to restore data that was entered by user. So it modifies the page, triggering the change event. This event is slighlty different than the one triggered by the user. It is a UIEvent while the user triggered one is a straight Event. And this Event is cancelable and triggered before the window load event. So this gives a couple of ways to deal with this. I'll take a select element for example.

If you want the select to keep value entered before window closing, but not trigger the onchange event, you can set the onchange call on the window.onload. Like this:

window.onload = function(){
     element.onchange = function(){

Since the setting of the select occurs before onload, this specific change won't trigger your onchange function.

Other way would be to target behaviors you don't to trigger by putting a condition validating if the element is cancelable or not. If it's cancelable, it means it's called from a restore session and won't trigger what's inside. Like this:

element.onchange = function(e){
         if(e.cancelable == true){

Other way, to clear out all data would be to set a document.onchange event and reload the page if the event is cancelable. Like this:

 document.onchange = function(e){
        if(e.cancelable == true){
            window.location = window.location
             }
      }

Of course you need to make sure you don't have any other cancelable change event called in your page.

EDIT:

To clarify order of events fired, see this jsfiddle, not in iframes, iframes seems to behave differently, so if you have iframes, it may be a bit more plicated. But without iframe, you'll see how the different events are triggered depending on your interactions:

 document.onchange = function (e) {
      //this will be triggered on restore before the window load event           
      alert('restore onchange called, e.cancelable = ' + e.cancelable)
 }


 window.onload = function (e) {
     //You'll see that on restore, this will be triggered but after page has been updated
     alert('window load called')
     document.onchange = function () {
         //This onchange will be called normally, not on restore
         alert('after onload change, e.cancelable = ' + e.cancelable)
     }

 }

http://fiddle.jshell/nozp9uhk/6/show/

Firefox is caching your files when you load the page, so when you restore the tab, the differences between your cached values and the new ones may be firing onchange events.

Try to clear the cache when restoring the tab. I see two ways to do this :

Call window.location.reload(true) to reload the current page

or

Change the name of the JavaScript file that initializes the onchange events for this :

<script language="JavaScript" type="text/javascript" src="yourscript.js?n=1"></script>

This (?n=1) will force Firefox to load a new copy of the file "yourscript.js"