我有一个在页面顶部创建栏(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();
};