javascript 防止在后退按钮上重新加载页面(使用缓存),或向下滚动用户,(至少在iPhone上)

kjthegm6  于 2023-06-20  发布在  Java
关注(0)|答案(2)|浏览(158)

当用户点击浏览器的后退按钮时,是否可以 * 防止 * 重新加载页面?或者至少确保页面像以前一样向下滚动?
我的网页显示了一个项目列表。用户向下滚动,然后单击一个项目以转到另一个页面。当他们然后点击后退按钮,我希望他们回到原来的页面,向下滚动。
这在我的桌面(Windows,Chrome)上工作得很好,但在我的iPhone(iOS7,Safari和Chrome)上,它会重新加载页面,首先,这需要时间,而且很烦人。Chrome然后向下滚动,但Safari没有,这意味着用户回到顶部。实际上,它们的行为并不一致。
这仅仅是浏览器做出的决定吗?它还在屏幕锁定后重新加载页面,然后解锁。(同样,我在iPhone上尝试。)或者是我的html/header/js可以做到这一点?
我想我可以使用HTML缓存,然后在页面本身上跟踪用户滚动了多远。然后,当页面从缓存中重新加载时,我可以让它向下滚动到之前的位置。真的要这么做吗
看起来www.amazon.com已经让它工作了,所以一定有一些解决方案。

vs91vp4v

vs91vp4v1#

你可以使用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,请尝试(cookie 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;
}
46scxncf

46scxncf2#

我不相信你可以“当用户点击浏览器后退按钮时阻止页面重新加载”(正如你的问题开始时)。用户应该对浏览器的导航位置有最终决定权。
您可以将一个函数绑定到beforeunload事件,并在该函数中放置一个警报,该警报将延迟用户按下backreload,让他们有机会阅读自定义消息并选择继续或取消。
在jQuery中:

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

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
如果您关心的是更简单地重新加载前一页的缓存和滚动版本,而不是执行完全全新的重新加载......这听起来更像是内容服务器上的设置和/或用户浏览器上的设置。
我知道我的注册商/主机可以登录并访问GUI缓存控件,或者我可以在我的.htaccess文件中上传自定义缓存指令。据我所知,这些将控制是否允许用户从您的服务器缓存文件,以及缓存多长时间。用户的网络浏览器也应该设置是否缓存文件或每次加载新文件。

相关问题