使用 Javascript 或 Jquery 重新加载带有锚点的页面

Question

我在我的 URL 中使用锚点作为 JavaScript 的一种变量，例如：

mysite.com/itempage.html#item75

当我单击任何其他页面上的链接时，此方法有效，但在实际页面 (itempage.html) 上无效。

点击链接只是更改 URL，而不是重新加载页面。由于页面没有重新加载，我的 JavaScript 都不会再次运行。

有人知道用新网址重新加载页面的方法吗？

到目前为止我已经尝试过：

HTML

<div id="itemmenu">
  <a id="item75" href="#">Item 75</a>
  <a id="item11" href="#">Item 11</a>
</div>

JQUERY

$( "#itemmenu a" ).each(function(index) { 
    $(this).on("click", function(){
        var linkid = $(this).attr('id'); 
        var winloc = "mysite.com/itempage#" + linkid;
        window.location  = winloc;
    });
});

Answer 1

这确实是预期的行为：不重新加载页面，而只是将页面滚动到锚点。此外，“#...”部分纯粹发生在客户端，浏览器不会将这部分 URI 发送到服务器，所以：

• http://example.com/hello.html 和：

• http://example.com/hello.html#toc

被视为服务器的相同 URI。

如果您需要重新加载页面，您可以这样做：

<div id="itemmenu">
  <a id="item75" href="?item=75">Item 75</a>
  <a id="item11" href="?item=11">Item 11</a>
</div>

如果您不需要重新加载页面，而只是为了重新运行 JavaScript，请将所需的 JavaScript 函数与任何相关链接上的点击事件相关联。

---

补充说明：

1. $(this).on("click", ...)可以简写为$(this).click(...)。

2. 您不需要实际的 JavaScript 代码：直接在 HTML 代码中设置 hrefs，而不是通过 JavaScript 更改它们。

Answer 2

您实际上可以使用window.location.reload() 触发页面重新加载，但我建议不要这样做。

改为在此处触发您的页面渲染所需的所有必要代码。

即

function setupPageLayout() {
  // TODO: add any code that's supposed to run on page switch
}

$(document).on('load', setupPageLayout);

$('#itemmenu a').each(function(index) { 
  $(this).on("click", function(){
    setupPageLayout();
  });
});

链接应如下所示：

<a href="#item34">item</a>