JavaScript - How to Detect If Document Has Loaded (Ie 7/Firefox 3)

Javascript page is fully loaded boolean check

You can check the document.readyState property.

From MDN:

Returns "loading" while the document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.

How to check if DOM is ready without a framework?

The document.readyState property can be used to check if the document is ready. From MDN:

Values

The readyState of a document can be one of following:

loading – The document is still loading.

interactive – The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.

complete – The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

Code example:

if(document.readyState === "complete") {
    // Fully loaded!
}
else if(document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
}
else {
    // Loading still in progress.
    // To wait for it to complete, add "DOMContentLoaded" or "load" listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
}

Detect page load completed event in Firefox

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 (...)

Check (from bookmarklet) whether page is loaded?

One way for checking if document has loaded, is to check the document.readyState property. IE, Firefox 3.6+, Webkit and Opera support it.

if (document.readyState === "complete") {
    // do sth
}

Another thing is, if you want to wait for the document to load. In that case you have to listen to some events, like DOMContentLoaded on document, load on window or readyStateChange on document.

how to tell when script added by document.createElement('script') is loaded

Except for IE before version 9, scripts fire an event onload-

else{
    var cCScript = document.createElement('script');
    cCScript.onload=contextualReplace;
    cCScript.src = 'contextualConversation.js';
}

(To cover older IE you can use its readystatechange event, check the microsoft developer network)

Detect if embedding page is fully loaded from inside an iframe

If the page and the iframe are from the same origin, you can hook the event via parent:

parent.document.addEventListener("DOMContentLoaded", postMessageFunctionCall);

That won't work cross-origin, though.

Because that sets up a race condition, you might check the document's readyState first:

if (parent.document.readyState !== "loading") {
    postMessageFunctionCall();
} else {
    parent.document.addEventListener("DOMContentLoaded", postMessageFunctionCall);
}