Browser 浏览器不记得上次查看页面的位置

Browser 浏览器不记得上次查看页面的位置,browser,header,scroll-position,Browser,Header,Scroll Position,我对这个问题做了几次搜索,结果空手而归。我希望有人能为我澄清一些事情,为我指明正确的方向 问题:我有一个页面,显示提交搜索表单后的结果列表。当用户单击其中一个结果时,浏览器将转到一个新页面,显示有关结果的更多信息。当用户单击“后退”按钮转到结果时,我的浏览器将重新加载页面并显示页面顶部,而不是上次单击的结果 目标:我想要的是:当用户单击“后退”按钮时,浏览器应该返回到上一页,而不是显示页面顶部,而是在上一位置显示页面 解决方案:我完全不知道如何实现这个结果。它可能与javascript或发送到浏

我对这个问题做了几次搜索,结果空手而归。我希望有人能为我澄清一些事情,为我指明正确的方向

问题:我有一个页面,显示提交搜索表单后的结果列表。当用户单击其中一个结果时,浏览器将转到一个新页面,显示有关结果的更多信息。当用户单击“后退”按钮转到结果时,我的浏览器将重新加载页面并显示页面顶部,而不是上次单击的结果

目标:我想要的是:当用户单击“后退”按钮时,浏览器应该返回到上一页,而不是显示页面顶部,而是在上一位置显示页面

解决方案:我完全不知道如何实现这个结果。它可能与javascript或发送到浏览器的标题有关,也可能与缓存有关。

如果这非常重要,我建议调查以下内容:

  • 向每个传出链接添加
    id
    s
  • 使用JavaScript捕获链接的
    onClick
  • 单击链接时,将用户重定向到该链接的
    id
    ,然后根据需要进行链接
当用户点击后退按钮时,他们将返回到该特定链接,例如
http://www.example.com/#link27
而不是
http://www.example.com/

您可以从这里获得一些想法:


    • 答案的第一部分是,您可以使用锚定在页面顶部以外的某个位置。因此,如果我在页面底部的html中有以下内容:

      <a name="f"></a>
      
      因此,如果您谈论的是ASP.Net,您可以将锚定放置在页面信息页面上的隐藏字段中,然后使用:page.PreviousPage属性从搜索页面读取锚定

      protected void Page_Load(object sender, EventArgs e)
      {
          if (Page.PreviousPage != null)
          {
              Object o = PreviousPage.FindControl("hfAnchor");
              if (o != null)
              {
                  HiddenField hf = o as HiddenField;
                  Response.Redirect(Request.Url+"#"+hf.Value);
              }
          }
      }
      

      您可以使用javascript和jquery设置窗口的滚动位置,并使用Cookie存储要滚动到的位置。在包含搜索结果的页面的javascript中,您可以有如下内容:

      var COOKIE_NAME = "scrollPosition";
      $(document).ready( function() {
      
          // Check to see if the user already has the cookie set to scroll
          var scrollPosition = getCookie(COOKIE_NAME);
          if (scrollPosition.length > 0) {
              // Scroll to the position of the last link clicked
              window.scrollTo(0, parseInt(scrollPosition, 10));
          }
      
          // Attach an overriding click event for each link that has a class named "resultLink" so the
          // saveScrollPosition function can be called before the user is redirected.
          $("a.resultLink").each( function() {
              $(this).click( function() { 
                  saveScrollPosition($(this));
              });
          });
      
      });
      
      // Get the offset (height from top of page) of the link element
      // and save it in a cookie.
      function saveScrollPosition(link) {
          var linkTop = link.offset().top;
          setCookie(COOKIE_NAME, linkTop, 1);
      }
      
      // Boring cookie helper function
      function getCookie(name) {
          if (document.cookie.length > 0) {
              c_start = document.cookie.indexOf(name + "=");
              if (c_start != -1) {
                  c_start = c_start + name.length + 1;
                  c_end = document.cookie.indexOf(";", c_start);
                  if (c_end ==- 1) c_end = document.cookie.length;
                  return unescape(document.cookie.substring(c_start, c_end));
              }
          }
          return "";
      }
      // Another boring cookie helper function
      function setCookie(name, value, expiredays) {
          var exdate = new Date();
          exdate.setDate(exdate.getDate() + expiredays);
          document.cookie = name + "=" + escape(value) +
              ((expiredays==null) ? "" : ";expires=" + exdate.toGMTString());
      }
      

      这假设您的搜索结果链接具有
      class=“resultLink”

      我通过使用php发送标题解决了这个问题。这就是我的解决方案:

      header("Expires: 0");
      header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
      header("Cache-Control: store, cache, must-revalidate");
      header("Cache-Control: post-check=0, pre-check=0", FALSE);
      

      感谢大家的帮助。

      不幸的是,我使用的是PHP,对ASP.NET一无所知,因此伪代码如下所示:1。用户单击结果列表中的链接。2.从单击的链接调用onClick事件。3.从事件调用的函数获取链接的id.4。该函数将页面重定向到结果页面,并将链接id附加到地址5的末尾。重新加载结果页面后,函数将页面重定向到包含更多结果信息的页面。这就是你的意思吗?我可以看到它是如何工作的,但是如果能找到一种更直接的方法,而不必第二次重新加载结果页面,那就太好了。是的,这很复杂。@VinkoCM,不需要重新加载整个页面。在大多数浏览器上,在同一页面的片段之间移动应该是几乎瞬间的。你知道为什么这样做吗?如果浏览器必须返回并点击web服务器获取内容,为什么它更有可能在“返回”按钮上保留页面状态信息?
      header("Expires: 0");
      header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
      header("Cache-Control: store, cache, must-revalidate");
      header("Cache-Control: post-check=0, pre-check=0", FALSE);