javascript - 强制 HTML 内部链接/片段标识符 (#) 重新加载页面

Question

如何让内部链接重新加载页面，就好像它是另一个 HTTP 请求一样？

考虑以下基本示例:

#content {margin-top:1400px;}

<a href="#content">Go to Content</a>

<section id="content">Content</section>

Go to Content anchor 将滚动到目标部分，并将哈希值 #content 添加到 URL (example.com/#content) 。我如何强制它重新加载/刷新页面，就好像它是像 example.com/content/

这样的外部链接

接受服务器端或 JavaScript 解决方案。

Answer 1

您可以向链接添加一个 click 处理程序，安排在事件完成后发生 location.reload()。

这是使用委托(delegate)处理的一个:

document.body.addEventListener("click", function(e) {
    var node = e.target;
    while (node && node != this) {
        if (node.nodeName.toUpperCase() == "A") {
            setTimeout(function() {
                location.reload();
            }, 0);
            return;
        }
        node = node.parentNode;
    }
}, false);

您可能需要对其进行一些过滤。