Question

当用户点击浏览器后退按钮时，是否可以阻止重新加载页面？或者至少确保页面像以前一样向下滚动？

我的网页显示了一个项目列表。用户向下滚动然后单击某个项目以转到另一个页面。然后当他们点击后退按钮时，我希望他们回到原始页面，向下滚动。

这在我的桌面（Windows，Chrome）上工作正常，但在我的iPhone（iOS7，Safari和Chrome）上，它会重新加载页面，这首先需要时间并且很烦人。然后Chrome向下滚动，但Safari没有，这意味着用户回到了顶部。实际上，这种行为似乎并不十分一致。

这只是浏览器做出的决定吗？它还会在屏幕锁定然后解锁后重新加载页面。（再一次，我正在试用iPhone。）或者是我的html / header / js可以做到的吗？

我认为我可以使用HTML缓存，然后在页面本身上跟踪用户滚动的距离。然后，当从缓存重新加载页面时，我可以将其向下滚动到之前的位置。这真的是要走的路吗？

看起来www.amazon.com已经开始运作，因此必须有一些解决方案。

Answer 1

您可以使用javascript来避免＆＃34;重新加载＆＃34;，但是其他一些原因可能会导致页面在手机上重新加载。

我建议您不要试图避免重新加载，而是使用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，请尝试（像localStorage这样的Cookie）：

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;
}

Answer 2

我不相信您可以在用户点击浏览器后退按钮时阻止页面重新加载＆＃34; （随着你的问题开始）。用户应该对浏览器导航的位置有最终决定权。

您可以将某个功能绑定到beforeunload事件，并且在该功能中，您可以发出一条警报，延迟用户按下back或reload他们有机会阅读自定义信息并选择继续或取消。

这是jQuery：

$(window).bind('beforeunload', function() {
  return 'Are you sure?';
});

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

如果您的问题更简单地重新加载上一页的缓存滚动版本，而不是执行全新的重新加载...这听起来更像是内容服务器上的设置和/或用户的设置＆＃ 39;浏览器。

我知道我的注册商/主机我可以登录并访问GUI缓存控件，或者我可以在我的.htaccess文件中上传自定义缓存说明。根据我的理解，这些将控制是否允许用户从服务器缓存文件，以及持续多长时间。用户的Web浏览器也应该具有关于是否每次缓存文件或加载新鲜的设置。

防止在后退按钮上重新加载页面（使用缓存）。或者向下滚动用户。（问题，至少是iPhone）

2 个答案:

兼容性

防止在后退按钮上重新加载页面（使用缓存）。或者向下滚动用户。 （问题，至少是iPhone）

2 个答案:

兼容性

防止在后退按钮上重新加载页面（使用缓存）。或者向下滚动用户。（问题，至少是iPhone）