Question

我有一个生成html的Web服务，我需要它每10秒在浏览器中自动刷新一次。我只是使用<meta http-equiv="refresh" content="10">完成了它并且它工作正常，保留了滚动位置（至少在Firefox中）。

然后我在页面中添加了一些内部链接，使用例如<a href="#foo">Foo</a>要关联<a name="foo"/>。单击此类链接后，我跳转到相应的部分，#foo将附加到地址栏中的URL，如预期的那样。但如果现在自动刷新，#foo将从地址栏中消失，刷新后页面会滚动到顶部。

是否有某种方法可以自动刷新页面，保持滚动位置并能够使用内部链接而不会破坏它？

更新

我尝试将元素更改为<meta http-equiv="refresh" content="10;url=page.html#foo">（暂时不使用Javascript，直接使用此值来查看是否有效）。我将页面打开为page.html，它会以page.html#foo刷新一次然后停止。为什么不保持清爽？

Answer 1

很遗憾，整个页面需要重新加载，而且您无法只进行AJAX调用来获取数据。

由于您的页面每次都需要刷新，因此可以考虑将滚动位置存储在本地存储中，并在页面再次加载时读取它。该代码可能如下所示：

document.addEventListener("DOMContentLoaded", function(event) { 
    var scrollpos = localStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, scrollpos);
});

window.onbeforeunload = function(e) {
    localStorage.setItem('scrollpos', window.scrollY);
};

如果您想刷新页面并保留锚点链接，可以使用JavaScript而不是元刷新标记：

setTimeout(function() {
    location.reload();
},10000);

Answer 2

您可以尝试客户端路由。

例如youresite.com/path#section2

“＃section2”指的是DOM元素的id。

当您刷新此URL时，它应该让您进入DOM的id section2。

在你的document.ready中你可以先使用window.location.href解析url并滚动到找到的id。我认为这可以解决您的问题。：）

自动HTML页面刷新保留滚动位置，使用锚点

2 个答案: