On page load

本篇文章介绍了在扩展开发中,如何在浏览器或者邮件客户端中的页面加载完成时执行指定的代码.

如果你需要更精确的控制特定代码的执行时刻:比如,当文档加载时,或者切换标签时,请查看Progress Listeners.

创建一个overlay

首先,你得为下面的某个XUL文档创建一个overlay

在overlay中添加脚本

想要了解如何为你的overlay添加脚本,请查看 "Attaching a Script to an Overlay".

下例中的代码为ID为"appcontent"的元素(Firefox,SeaMonkey)或者ID为"messagepane"的元素 (Thunderbird)添加了一个DOMContentLoaded事件监听函数.

window.addEventListener("load", function load(event){
    window.removeEventListener("load", load, false); //取消监听,浏览器的load事件仅有一次.
    myExtension.init();  
},false);

var myExtension = {
  init: function() {
    var appcontent = document.getElementById("appcontent");   // Firefox,SeaMonkey
    if(appcontent){
      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
    }
    var messagepane = document.getElementById("messagepane"); // Thunderbird
    if(messagepane){
      messagepane.addEventListener("DOMContentLoaded", function(event) { myExtension.onPageLoad(event); }, true);
    }
  },

  onPageLoad: function(aEvent) {
    var doc = aEvent.originalTarget; // doc指向触发"DOMContentLoaded"事件的文档节点.
    if(doc.location.href.search("forum") > -1) { // 判断页面网址,只在特定的网址执行代码.
          alert("一个论坛页面加载完毕");
    }
    // 为页面添加unload事件监听函数.
    aEvent.originalTarget.defaultView.addEventListener("unload", function(event){ myExtension.onPageUnload(event); }, true);
  },

  onPageUnload: function(aEvent) {
    // 处理unload事件代码
  }
};

在Firefox当前的nightly版本中,除了xul:browser元素中的document节点会触发DOMContentLoaded事件之外, xul:images元素也会触发. 如果你想排除document之外的节点,使用条件表达式aEvent.originalTarget.nodeName == "#document" 来做判断.

如果你想为页面的unload事件添加一些处理代码.你也可以使用appcontent元素的"pagehide"事件,如下:

appcontent.addEventListener("pagehide", myExtension.onPageUnload, false);

和appcontent类似,messagepane是这样的:

messagepane.addEventListener("pagehide", myExtension.onPageUnload, false);

把你需要执行的代码添加到onPageUnload方法中.

另一种绑定DOMContentLoaded事件的方法

可以在全局变量gBrowser上绑定所需事件.推荐!

var myExtension = {
    init: function() {
        if(gBrowser) {       
              // 事件类型可以是DOMContentLoaded, pageshow, pagehide, load or unload等.
              gBrowser.addEventListener("DOMContentLoaded", this.onPageLoad, false);
        }
    },
    onPageLoad: function(aEvent) {
        var doc = aEvent.originalTarget; // doc指向触发该事件的文档节点.
        var win = doc.defaultView; // win指向doc文档节点所在的窗口
        // if (doc.nodeName == "#document") return; // 只在文档节点时执行
        // if (win != win.top) return; // 跳过非顶层窗口.
        // if (win.frameElement) return; // 跳过iframes/frames框架.
        alert("页面已经加载 \n" +doc.location.href);
    }
}
window.addEventListener("load", function load(event){
    window.removeEventListener("load", load, false); //取消监听,load事件仅有一次.  
    myExtension.init();  
},false);

相关链接

• DOMContentLoaded event in Listening to events: Simple DOM events