Question

我有一个在页面顶部创建栏（HTML）的功能。栏很简单，它包含3件事：公司徽标，链接列表（表格是正确的）和控制元素。

条形图行为：当用户调整浏览器窗口大小时，缩短或扩展链接列表，取决于没有滚动条的内部链接数量。但酒吧的其余部分保持不变。

这意味着我只使用列表的html元素（再也不会调用createBar）。

除了一件事，一切都是完美的。当用户进入另一个页面然后返回时，则整个栏被复制，但仅当用户具有firefox 30且浏览器缩放级别不是100％（他使用ctrl + / ctrl - ）时。在chrome中，一切都很好。

从我的角度来看，当我点击后退时，页面显示1条，但页面仍在加载，100-500ms后会出现另一个栏。如果我再次转到另一个链接，则会有2个小节，第三个会在一段时间后出现。所以看起来最后一个状态是从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();
};

在Firefox 30中的后退按钮上再次触发window.onload

0 个答案: