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

时间:2009-08-01 00:16:56

标签: browser header scroll-position

我已经针对这个问题进行了一些搜索,我空手而归。我希望有人可以为我澄清一些事情,并指出我正确的方向。

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

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

解决方案:我完全迷失了,因为这个结果是如何实现的。它可能与javascript或发送到浏览器的标题有关,可能与缓存有关。

4 个答案:

答案 0 :(得分:2)

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

  • id添加到每个外发链接
  • 使用JavaScript捕获链接的onClick
  • 点击链接后,将用户重定向到该链接的id fragment identifier,然后根据需要链接

当用户点击后退按钮时,他们将返回该特定链接,例如http://www.example.com/#link27代替http://www.example.com/

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

答案 1 :(得分:1)

您可以使用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"

答案 2 :(得分:0)

答案的第一部分是你使用锚点降落在除顶部之外的某个页面上。所以,如果我在页面底部的html中有这个:

<a name="f"></a>

然后我可以通过将锚点附加到他的URL:

的末尾让用户登陆
http://www.bullionvalues.com/glossary.aspx#f

因此,如果您正在谈论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);
        }
    }
}

答案 3 :(得分:0)

我通过使用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);

感谢大家的帮助。