几个月前我编写了一个 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/