Question

我正在编写Firefox扩展程序。该扩展程序用其他单词替换页面上的某些单词。这是我正在使用的基本代码：

function startup() {
    gBrowser.addEventListener("load", pageLoad, true);
}

function pageLoad(event) {
    if (event.originalTarget instanceof HTMLDocument) {
        var ht = content.document.body.innerHTML;
        ht = ht.replace(/\bthe\b/g,"el");
        content.document.body.innerHTML = ht;
    }
}

问题是此代码导致无限循环。当我设置body的innerHTML属性时，它会发送另一个load事件，这会导致无限循环。

如何加载页面而不会导致页面加载事件再次触发？

Answer 1

您可以使用以下代码检查之前是否已经运行过。

var loaded = false;

function pageLoad(event) {
    if (!loaded) {
        if (event.originalTarget instanceof HTMLDocument) {
            var ht = content.document.body.innerHTML;
            ht = ht.replace(/\bthe\b/g,"el");
            content.document.body.innerHTML = ht;
        }
        loaded = true;
    }
}

或者，如果您想将loaded变量保留在全局范围之外，可以使用闭包：

var pageLoad = (function () {
  var loaded = false;
  return function(event) {
    if (!loaded) {
        if (event.originalTarget instanceof HTMLDocument) {
            var ht = content.document.body.innerHTML;
            ht = ht.replace(/\bthe\b/g,"el");
            content.document.body.innerHTML = ht;
        }
        loaded = true;
    }
  }
}();

外部函数立即执行并返回内部函数，该函数由于关闭而具有loaded变量的可见性。

Answer 2

在身体标签内部立即使用div或span标签是一种选择吗？然后你可以只更新那个元素的innerHTML，而不是整个身体......

更新页面HTML导致无限循环

2 个答案: