javascript - DOMContentLoaded 事件为单个页面加载触发两次

标签 javascript dom event-handling firefox-addon

几个月前我编写了一个 Firefox 附加组件,但最近失败了。该插件主要是查找特定的 URL,然后修改页面的 DOM。我将故障追溯到(意外)安装“AVG Safe Search”附加组件。我发现,在禁用 AVG 附加组件的情况下,DOMContentLoaded 事件会针对文档触发一次(我最初预期的行为),但启用它后,DOMContentLoaded 事件会针对文档触发两次。我的加载项将一列插入到 HTML 表格中,因此由于事件触发两次,因此插入了两个重复的列,而不是一个。

这是我的附加组件的精简初始化代码:

var hLoadListener = function(event) { myAddon.initialize(event); }
var hContentLoadedListener = function(event) { myAddon.onContentLoaded(event); }

myAddon.initialize = function(aEvent)
{
    gBrowser.addEventListener("DOMContentLoaded", hContentLoadedListener, false);
};

myAddon.onContentLoaded = function(aEvent)
{
    if (!(aEvent.originalTarget.nodeName === "#document")) { return; }

    var doc = aEvent.target; // document that triggered "onload" event

    if (!(doc instanceof HTMLDocument)) { return; }
    if (!doc.location) { return; }

    var href = doc.location.href; // URL of current page

    if (URLRegExp.test(href))
    {
      // Modify the page's DOM
    }
};

window.addEventListener("load", hLoadListener, false);

这个问题似乎很容易解决,方法是插入一个唯一的 DOM 元素,然后在开始时测试它是否存在。我的问题是附加组件开发人员是否应该期望此事件行为正常,或者此问题是否主要是 AVG 附加组件中的错误/副作用?

最佳答案

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded');
    // do stuff
},{ once: true });

关于javascript - DOMContentLoaded 事件为单个页面加载触发两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4355344/

相关文章:

javascript - 我可以将函数绑定(bind)到父窗口的onscroll事件吗?

javascript - 标签 - 如何设置标签所需

java - 使用 dtd 进行 XML 验证

javascript - 在 Firefox、IE 和 Chrome 中检测窗口 onblur() 事件?

VB.NET:SelectedIndexChanged 多次触发

javascript - JS浏览器事件处理

php - 如何在不使用ajax的情况下将javascript动态数据发送到php变量

javascript - moment.js : format a date keeping the locale's day, 年月顺序

java - 在 Java 中解析 XML 返回错误的子级数量

javascript - 如何从 href 获取文本?