Javascript Firefox 30中的返回按钮再次触发window.onload

我有一个函数，可以在页面顶部创建条（HTML）。 该栏非常简单，它包含3个内容：公司徽标、链接列表（表要正确）和控制元素

条形图行为：当用户调整浏览器窗口的大小时，链接列表会缩短或扩展，这取决于在没有滚动条的情况下可以容纳多少链接。但其余部分保持不变

这意味着我只处理列表中的html元素（不再调用

createBar

）

除了一件事，一切都很好。当用户转到另一个页面，然后返回时，整个栏被复制，但前提是用户有firefox 30，并且浏览器的缩放级别不是100%（他使用了ctrl+/ctrl-）。铬合金的一切都很好

在我看来，当我点击后退时，页面显示为1条，但页面仍在加载，100-500毫秒后，另一条显示出来。如果我转到另一个链接并再次返回，则有两个条，第三个条在一段时间后出现。因此，看起来最后一个状态是从bf缓存加载的，但随后再次调用

onload

，这会创建另一个条。所以我尝试在我的js代码中设置断点，但它没有捕获任何东西。根据Firefox调试器，不会再次触发

onload

我的代码框架：

TopBar = function () {
    this.init();
};

TopBar.prototype.init = function () {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", this.dataSource, true);
    xhr.responseType = "text";
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) {
            return;
        }

        if (xhr.status === 200) {
            try {
                var serverResponse = JSON.parse(xhr.responseText);
                this.createBar(serverResponse);
            } catch (e) {
                console.error("Parse JSON failed. ");
            }
        }
    }.bind(this);

    xhr.send();
};

TopBar.prototype.createBar = function (data) {
    // I create whole bar HTML here and append it to body

    window.addEventListener('resize', this.recalculate.bind(this));
};

TopBar.prototype.recalculate = function () {
    this.barEl.style.visibility = "hidden";
    if (window.innerWidth < 900) {
        this.barEl.style.display = "none";
        return;
    }

    // else recalculate part of the bar and display it
    // it means change some html,

    this.barEl.style.visibility = "visible";
};

window.onload = function () {
    new TopBar();
};

TopBar=函数（）{
this.init（）；
};
TopBar.prototype.init=函数（）{
var xhr=new XMLHttpRequest（）；
open（“GET”，this.dataSource，true）；
xhr.responseType=“文本”；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState！=4）{
返回；
}
如果（xhr.status==200）{
试一试{
var serverResponse=JSON.parse（xhr.responseText）；
这个.createBar（serverResponse）；
}捕获（e）{
错误（“解析JSON失败”）；
}
}
}.约束（本）；
xhr.send（）；
};
TopBar.prototype.createBar=函数（数据）{
//我在这里创建了整个HTML条，并将其附加到正文中
window.addEventListener（'resize'，this.recompute.bind（this））；
};
TopBar.prototype.recompute=函数（）{
this.barEl.style.visibility=“hidden”；
如果（窗内宽度<900）{
this.barEl.style.display=“无”；
返回；
}
//否则，请重新计算部分栏并显示它
//它意味着改变一些html，
this.barEl.style.visibility=“可见”；
};
window.onload=函数（）{
新的TopBar（）；
};

我想触发的是

调整大小

。您的

createBar

函数以某种方式附加到

resize

。从

.createBar

赋值中检查

此

的值，将其记录到控制台，以确保其具有您期望的值。@IvyLynx我首先想到了相同的事情，因此我已经调试了它，并且我非常确定不会再次使用resize调用它。还请注意，简单的调整大小和缩放是有效的。只有当backbutton+zoomchange+firefox时，它才会断开。我可能会通过重写

onunload

来禁用bfcache，但这不是我的拿手好戏。嗯，这可能是其他事件，但无论如何，一个快速解决方案可能是强制执行您的条的单个实例，使其成为单例排序。如果这不起作用，那么back+zoom会出现一些非常奇怪的情况。