MozillaZine

On Page Load

From MozillaZine Knowledge Base

(Difference between revisions)
Revision as of 10:56, 16 January 2005
Asqueella (Talk | contribs)
(On Tab Load)
<-- Previous diff
Revision as of 17:11, 2 March 2005
Asqueella (Talk | contribs)

Next diff -->
Line 1: Line 1:
{{extdev}} {{extdev}}
-This page is for people who want to have their code executed each time a new page is loaded in browser/mail.+This article is for XUL/Javascript developers who want to have their code executed each time a new page is loaded in browser/mail.
-You need to create an overlay to <tt>chrome://browser/content/browser.xul</tt> (Firefox), <tt>chrome://navigator/content/navigator.xul</tt> (browser - Mozilla Suite) or <tt>chrome://messenger/content/messenger.xul</tt> (Thunderbird and Mozilla Mail) and add a ''load'' event listener to ''appcontent'' element (browsers) or ''messagepane'' (mail):+==Creating an overlay==
 +First, you need to create an overlay to one (or more, depending on which applications you target) of the following XUL documents:
 +{| border="1" cellpadding="5" rules="all"
 +! Application !! URI to overlay
 +|-
 +| Firefox || <code>chrome://browser/content/browser.xul</code>
 +|-
 +| Thunderbird and Mozilla Mail || <code>chrome://messenger/content/messenger.xul</code>
 +|-
 +| Navigator from the Mozilla Suite || <code>chrome://navigator/content/navigator.xul</code>
 +|}
-<pre>window.addEventListener('load', onInit, false);+==Attaching a script==
 +Attach a script to your overlay, and add a <code>load</code> event listener to <code>appcontent</code> element (browsers) or <code>messagepane</code> (mail) by putting this code in the script:
-function onInit() {+<pre>window.addEventListener("load", function() { myExtension.init(); }, false);
- var appcontent = document.getElementById("appcontent"); // browser+
- if(appcontent)+
- appcontent.addEventListener("load", onPageLoad, true);+
- var messagepane = document.getElementById("messagepane"); // mail+
- if(messagepane)+
- messagepane.addEventListener("load", onPageLoad, true); +
-} +
-function onPageLoad(aEvent) {+var myExtension = {
- var doc = aEvent.originalTarget; // doc is document that triggered "onload" event+ init: function() {
- // do something with the loaded page.+ var appcontent = document.getElementById("appcontent"); // browser
- // doc.location is a Location object (see below for a link).+ if(appcontent)
- // You can use it to make your code executed on certain pages only.+ appcontent.addEventListener("load", function(e) {myExtension.onPageLoad(e);}, true);
- if(doc.location.href.search("forum") > -1)+ var messagepane = document.getElementById("messagepane"); // mail
- alert("a forum page is loaded");+ if(messagepane)
 + messagepane.addEventListener("load", function(e) {myExtension.onPageLoad(e);}, true);
 + },
 + 
 + onPageLoad: function(aEvent) {
 + var doc = aEvent.originalTarget; // doc is document that triggered "onload" event
 + // do something with the loaded page.
 + // doc.location is a Location object (see below for a link).
 + // You can use it to make your code executed on certain pages only.
 + if(doc.location.href.search("forum") > -1)
 + alert("a forum page is loaded");
 + }
} }
</pre> </pre>
-Of course, you need to use [[Dev : Javascript coding guidelines|unique identifiers]] instead of generic ''onInit'' and ''onPageLoad''.+==References==
- +* See Chris Neale's URIid extension for a working example.
-See cdn's URIid extension for a working example.+* If you need to have a more complicated listener (not just onload), use [[Dev : Extensions : Example Code : Progress Listeners|progress listeners]].
- +* [http://xulplanet.com/references/objref/Location.html Location object]
-If you need to have a more complicated listener (not just onload), use [[Dev : Extensions : Example Code : Progress Listeners|progress listeners]].+
- +
-===References===+
-[http://xulplanet.com/references/objref/Location.html Location object]+
[[Category:Development|On Tab Load]] [[Category:Example code|On Tab Load]] [[Category:Development|On Tab Load]] [[Category:Example code|On Tab Load]]

Revision as of 17:11, 2 March 2005

This page is part of the extension development documentation project.

Ask your questions in MozillaZine Forums. Also try browsing example code.

Note: development documentation is in process of being moved to Mozilla Development Center (MDC).

This article is for XUL/Javascript developers who want to have their code executed each time a new page is loaded in browser/mail.

Creating an overlay

First, you need to create an overlay to one (or more, depending on which applications you target) of the following XUL documents:

Application URI to overlay
Firefox chrome://browser/content/browser.xul
Thunderbird and Mozilla Mail chrome://messenger/content/messenger.xul
Navigator from the Mozilla Suite chrome://navigator/content/navigator.xul

Attaching a script

Attach a script to your overlay, and add a load event listener to appcontent element (browsers) or messagepane (mail) by putting this code in the script:

window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {
  init: function() {
    var appcontent = document.getElementById("appcontent");   // browser
    if(appcontent)
      appcontent.addEventListener("load", function(e) {myExtension.onPageLoad(e);}, true);
    var messagepane = document.getElementById("messagepane"); // mail
    if(messagepane)
      messagepane.addEventListener("load", function(e) {myExtension.onPageLoad(e);}, true);
  },

  onPageLoad: function(aEvent) {
    var doc = aEvent.originalTarget; // doc is document that triggered "onload" event
    // do something with the loaded page.
    // doc.location is a Location object (see below for a link).
    // You can use it to make your code executed on certain pages only.
    if(doc.location.href.search("forum") > -1)
      alert("a forum page is loaded");
  }
}

References

  • See Chris Neale's URIid extension for a working example.
  • If you need to have a more complicated listener (not just onload), use progress listeners.
  • Location object