是否可以阻止在用户单击浏览器后退按钮时重新加载页面?或者至少确保页面像以前一样向下滚动?
我的网页显示了一个项目列表。用户向下滚动,然后单击一个项目转到另一个页面。当他们点击后退按钮时,我希望他们回到原来的页面,向下滚动。
这在我的桌面(Windows、Chrome)上运行良好,但在我的 iPhone(iOS7、Safari 和 Chrome)上,它会重新加载页面,首先,这需要时间并且很烦人。 Chrome 然后向下滚动,但 Safari 不会,这意味着用户回到顶部。实际上,这种行为似乎并不十分一致。
这只是浏览器做出的决定吗?它还会在屏幕锁定然后解锁后重新加载页面。 (同样,我在 iPhone 上尝试。)还是我的 html/header/js 可以做到这一点?
我想我可以使用 HTML 缓存,然后在页面本身上跟踪用户滚动了多远。然后当页面从缓存中重新加载时,我可以让它向下滚动到之前的位置。这真的是要走的路吗?
看起来 www.amazon.com 已经正常工作了,所以一定有一些解决方案。
最佳答案
您可以使用 javascript 来避免“重新加载”,但其他一些原因可能会使页面在移动设备上重新加载。
我建议不要试图避免重新加载,而是使用 cookie 或更好的方式保存用户数据 localStorage .
比如你想保存最后一页的位置(滚动条的位置):
(function () {
var scrollFired = false;
function saveScroll () {
if (window.localStorage) {
window.localStorage.setItem("scrollLeftTop", window.pageXOffset + "," + window.pageYOffset);
}
}
function autoScroll() {
scrollFired = true;
if (window.localStorage) {
var xy = window.localStorage.getItem("scrollLeftTop");
if (xy) {
var a = xy.split(",");
var x = a[0];
var y = a[1];
window.scroll(x, y);
}
}
}
function onLoadAutoScroll() {
if(scrollFired === false) {//Prevent scroll if run DOMContentLoaded
autoScroll();
}
}
window.addEventListener("DOMContentLoaded", autoScroll, false);
window.addEventListener("load", onLoadAutoScroll, false);//If DOMContentLoaded not "run"
window.addEventListener("scroll", saveScroll, false);
})();
兼容性
注意:如果在旧版浏览器中需要 localStorage
,请尝试(cookies like localStorage):
if (!window.localStorage) {
window.localStorage = {
getItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
},
key: function (nKeyId) {
return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
},
setItem: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
this.length = document.cookie.match(/\=/g).length;
},
length: 0,
removeItem: function (sKey) {
if (!sKey || !this.hasOwnProperty(sKey)) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
this.length--;
},
hasOwnProperty: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
};
window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}
关于javascript - 防止页面在后退按钮上重新加载(使用缓存)。或者向下滚动用户。 (问题,至少,iPhone),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24845683/