使用Javascript重新加载带有哈希值的页面

Question

我正在尝试在一些处理后使用外部JavaScript文件中的语句来刷新页面。

window.location.href = window.location.href

它可以完美地重新加载页面，但我想在重新加载后滚动到特定位置。 因此，我在页面上添加了这个。

<a name="uploadImgSection"></a>

并将 JavaScript 更改为

window.location.href = window.location.href + "#mypara";

这段代码也不会重新加载/刷新页面

window.location.hash = "#uploadImgSection";
window.location.href = window.location.href;

我这样做时，页面根本不会重新加载。有没有办法可以重新加载页面并保持滚动条的位置？

- Jonas T

---

使用PHP文件重定向到新页面？ - Derek 朕會功夫

目的是在运行一些JavaScript函数后刷新页面并将其滚动回该段落的位置。 - Jonas T

你是如何调用 window.location.href 的？如果你在页面加载时这样做，并且你按下 F5 并且使用 Firefox（或其他滚动到刷新前位置的浏览器），那么这可能是问题所在。 - ajax333221

Answer 1

window.location.href += "#mypara";
location.reload();

先添加哈希值，然后重新加载页面。哈希值将保留在那里，页面也会被重新加载。

测试过，可行。

---

ps：如果URL中已经存在哈希值，则可以直接通过location.hash更改它，而不是.href。

- Derek 朕會功夫

---

还有一件事。它确实刷新了页面，但在重新加载后包括了帖子数据。我该如何清除这些数据？这些帖子数据正在阻止我删除数据行。 - Jonas T

嗯，我不太了解POST。但是如果你想的话，你可以提一个新的问题来问它。 - Derek 朕會功夫

好吧，最后我不得不使用查询字符串。 "window.location.href = url + "&action=reload";"。在页面加载事件中检查操作查询字符串，并执行此操作 "window.location.hash = "#uploadImgSection";"。这不是它应该工作的方式，但我现在不得不这样做才能使其正常工作。 - Jonas T

@Derek朕會功夫 你真是个天才 :) - Attila Naghi

如果哈希值未被修改（即您重新加载期望浏览器返回到相同的锚点），则此方法无效。它将返回到先前的滚动位置。 - developius

Answer 2

我想更新这个问题，因为我发现使用 window.location.href += "#mypara" 会在URL中保留参数，即使它已经存在。我发现更好的方法是使用

window.location.hash = "#mypara"
location.reload();

- ug_

Answer 3

这是一篇旧帖子，我仍会尝试用正确的答案组合来回答。

1. location.reload()和location.reload(true)的作用类似于浏览器中的F5。如果先前的加载已经将所有表单数据提交到服务器，则此操作将重新提交它们。
2. location.href在浏览器没有识别到URL更改时不会刷新页面。更改哈希（#paramname）不符合URL更改的条件，因此仅执行location.href+="#paramname"是无效的。

因此，location.href+="?anything#paramname"应该重新加载页面作为新请求，因为?anything是URL的更改。

- JayB

---

好的回答。这是一个处理过的版本： window.location='<?php echo $_POST['back'] ?>&rand='+((new Date()).getTime()%1000000000)+'#myhash'; - Johan

另一个例子：location.href+='&rand='+Math.rand()+'#myhash'; - Johan

在我看来，与其他帖子相比，这个回答最好。它不需要更改可能作为库的一部分编写的基础代码。 - thekingoftruth

Johan，应该将Math.rand()更改为Math.random()。 - tomJO

最接近的答案（也许其他答案在2012年是正确的，但是在2018年都不正确），但它存在一个问题，即会向用户的地址栏历史记录中添加条目，如果您只是尝试刷新相同的历史记录状态，这并不好... - Glenn Maynard

Answer 4

var loc = location.hash;
location.hash = " ";
location.hash = loc;

- Pandimanikandan A

---

仅提供代码答案并不十分有用。这段代码在做什么？它为何有效？ - random_user_name

Answer 5

这对我有用

$('body').on('click', '.className', function () {
    var data = $(this).attr('href');
    alert(data);
    window.location.reload();
});

- Kailash Chandra Panigrahi

---

这似乎基本上是其他答案已经做过的事情的更长的方式，而且我认为它不包括 #myPara 部分，所以不会像原帖子发布者想要的那样工作，尽管如果我错了，请编辑答案澄清。 - blm

Answer 6

这对我有效

window.location.href = baseUrl + "#/m/team";
 location.reload();

- MK Shah

Answer 7

试试这个

           var urlString=window.location.href;
           var url=urlString.split("#")[0];
           window.location.href = url + "#mypara";

- Hearaman

---

这也不会重新加载页面。 - Jonas T

“只给出代码答案并不是很有用。它在做什么？为什么有效？” - random_user_name

Answer 8

这对我有用：

var tabValue = document.URL;
window.location = tabValue.substring(0, tabValue.lastIndexOf("#"));
window.location.hash = "#tabs-3"; //Whatever is your hash value
location.reload();

- Amit