使用html錨點（＃）強制頁面重新加載 - HTML＆JS

Question

假設我在頁面上，名爲/example#myanchor1，其中myanchor是頁面中的一個錨點。 我想鏈接到/example#myanchor2，但強制頁面重新加載。

原因是我運行js在頁面加載時從url檢測錨點。 雖然這裏的問題（通常是預期的行爲），但瀏覽器只是將我發送到頁面上的特定錨點而無需重新加載頁面。

我該怎麼做呢？ JS是確定的。

Answer 1

我建議監視URL中的錨點以避免重新加載，這幾乎是使用控制流的錨點。但仍然在這裏。我會說使用一個簡單的錨鏈接強制重裝最簡單的方法是使用

<a href="?dummy=$random#myanchor2"></a> 

其中代替$random插入隨機數（假定「虛擬」不解釋服務器端）。我確定有一種方法可以在設置錨點後重新加載頁面，但這可能會比較困難，然後只需對設置的錨點作出反應，然後執行當前所需的內容即可。

然後，如果以這種方式重新加載頁面，您可以將myanchor2作爲查詢參數來代替，並呈現您的東西服務器端。

編輯
注意，上面的鏈接將在所有情況下重新加載，如果你只需要，如果你不是已經在頁面上重新加載，你需要有虛擬變量更可預測，像這樣

<a href="?dummy=myanchor2#myanchor2"></a> 

我仍然會建議只監視哈希。

Answer 2

如果你打算不斷地重新加載頁面，那麼使用客戶端JS有什麼意義呢？即使在頁面沒有重新加載時，監視哈希值也可能更好。

This page有一個哈希監視器庫和一個jQuery插件去。

如果你真的想重新加載頁面，爲什麼不使用查詢字符串（？foo）而不是散列？

Answer 3

尚未提及的另一個選項是將事件偵聽器（例如使用jQuery）綁定到您關心的鏈接（可能全部是這些鏈接，可能不是）並讓偵聽器調用任何函數你用。評論後

編輯

例如，你可能有這樣的代碼在你的HTML：

<a href="example#myanchor1" class="myHash">example1</a> 
<a href="example#myanchor2" class="myHash">example2</a> 
<a href="example#myanchor3" class="myHash">example3</a> 

然後，您可以添加以下代碼綁定和迴應鏈接：

<script type="text/javascript"> 
    $('a.myHash').click(function(e) { 
     e.preventDefault(); // Prevent the browser from handling the link normally, this stops the page from jumping around. Remove this line if you do want it to jump to the anchor as normal. 
     var linkHref = $(this).attr('href'); // Grab the URL from the link 
     if (linkHref.indexOf("#") != -1) { // Check that there's a # character 
      var hash = linkHref.substr(linkHref.indexOf("#") + 1); // Assign the hash to a variable (it will contain "myanchor1" etc 
      myFunctionThatDoesStuffWithTheHash(hash); // Call whatever javascript you use when the page loads and pass the hash to it 
      alert(hash); // Just for fun. 
     } 
    }); 
</script> 

請注意，我使用jQuery class selector來選擇我想監視的鏈接，但是您可以使用wh atever selector你想要的。根據你現有的代碼的工作方式，你可能需要修改你傳遞給它的方式/你可能需要建立一個完整的URL，包括新的散列，並傳遞它 - 例如，http://www.example.com/example#myanchor1），或者修改現有的代碼以接受您通過新代碼傳遞給您的代碼。

Answer 4

另一種方法是設置url並使用window.location.reload()來強制重新加載。

<a href="/example#myanchor2" 
    onclick="setTimeout(location.reload.bind(location), 1)"> 
</a> 

基本上，setTimeout延遲重新加載。由於onclick中沒有return false，因此執行href。該網址然後由href更改，只有在頁面重新加載後。

不需要jQuery，它是微不足道的。

Answer 5

這裏的東西就像我做了什麼（其中 「ANC」 不用於別的）：

<a href="/example?anc=myanchor2"></a> 

而且onload事件：

window.onload = function() { 
    var hash = document.location.hash.substring(1); 
    if (hash.length == 0) { 
     var anc = getURLParameter("anc"); 
     if (anc != null) { 
      hash = document.location.hash = anc; 
     } 
    } 
} 

的getURLParameter功能是從here

Answer 6

簡單那樣

<a href="#hardcore" onclick="location.reload()">#hardcore</a> 

an example

Answer 7

我最喜歡的解決方案，通過another answer的啓發是：

<a href="#myanchor2" onclick="location.hash='myanchor2'; location.reload();">myanchor2</a> 

href鏈接不會被遵循，所以你可以用你自己的喜好，例如：""或"#"。

即使我喜歡接受的答案，我覺得這更優雅，因爲它不引入外部參數。而@ Qwerty和@ Stilltorik的答案都是在我重新加載後導致哈希消失。