Detect page load completed event in Firefox

Question

I'm writing a Firefox add-on that do something after the webpage is completely loaded.
My current code is

var target = this;
    const STATE_STOP = Components.interfaces.nsIWebProgressListener.STATE_STOP;
    const STATE_IS_WINDOW = Components.interfaces.nsIWebProgressListener.STATE_IS_WINDOW;
    const STATE_IS_DOCUMENT = Components.interfaces.nsIWebProgressListener.STATE_IS_DOCUMENT;
    const locationChangeListener = {
        onStatusChange: function(){},
        onProgressChange: function(){},
        onLocationChange: function(aWebProgress, aRequest, aLocation){},
        onStateChange: function(aWebProgress, aRequest, aFlag, aStatus){
            if((aFlag & STATE_STOP) && (aFlag & STATE_IS_WINDOW)){


                //Do something in here


            }
        },
        onSecurityChange: function(){}
    };
    gBrowser.addProgressListener(locationChangeListener);

It works fine. But sometimes, for example webpage with AJAX call, this event fired several times for one web page.

Is there any way to detect if the webpage is completely loaded or not?

Answer 1

If you are only interested in detecting when the page has completely loaded and not the intermediary steps it is easier to listen for load events, with something like (code from https://developer.mozilla.org/en/Code_snippets/Tabbed_browser):

function examplePageLoad(event) {
  if (event.originalTarget instanceof HTMLDocument) {
    var win = event.originalTarget.defaultView;
    if (win.frameElement) {
      // Frame within a tab was loaded. win should be the top window of
      // the frameset. If you don't want do anything when frames/iframes
      // are loaded in this web page, uncomment the following line:
      // return;
      // Find the root document:
      win = win.top;
    }
  }
}

// do not try to add a callback until the browser window has
// been initialised. We add a callback to the tabbed browser
// when the browser's window gets loaded.
window.addEventListener("load", function () {
  // Add a callback to be run every time a document loads.
  // note that this includes frames/iframes within the document
  gBrowser.addEventListener("load", examplePageLoad, true);
}, false);

...
// When no longer needed
gBrowser.removeEventListener("load", examplePageLoad, true);
...

gBrowser is a global var in the main firefox window (if your code is running from an overlay of browser.xul you should see it). If not (running in a sidebar for example), you can get a reference to the main window:

var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                       .getInterface(Components.interfaces.nsIWebNavigation)
                       .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
                       .rootTreeItem
                       .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                       .getInterface(Components.interfaces.nsIDOMWindow);

mainWindow.gBrowser.addEventListener (...)