Принудительная перезагрузка страницы с помощью якорей 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

Просто так

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

пример

Answer 3

Какой смысл использовать JS на стороне клиента, если вы все равно будете постоянно перезагружать страницу? Возможно, лучше отслеживать изменения в хэше, даже если страница не перезагружается.

Эта страница имеет библиотеку хэш-монитора и плагин jQuery, чтобы идти с ней.

Если вы действительно хотите перезагрузить страницу, почему бы не использовать строку запроса (? Foo) вместо хеша?

Answer 4

Другой способ сделать это - установить URL и использовать window.location.reload() для принудительной перезагрузки.

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

Как правило, setTimeout задерживает перезагрузку. Поскольку return false в клике отсутствует, выполняется href. URL-адрес затем изменяется на href и только после этого страница перезагружается.

Нет необходимости в jQuery, и это тривиально.

Answer 5

Другой вариант, который еще не был упомянут, - это связать прослушиватели событий (используя, например, 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 , чтобы выбрать ссылки, которые я хочу отслеживать', но вы можете использовать любой селектор , какой пожелаете.

В зависимости от того, как работает ваш существующий код, вам может понадобиться либо изменить то, как / что вы передаете ему (возможно, вам потребуетсясоздайте полный URL-адрес, включая новый хеш, и передайте его через - например, http://www.example.com/example#myanchor1), или измените существующий код, чтобы принять то, что вы передаете ему от нового кода.

Answer 6

Мое любимое решение, вдохновленное другим ответом :

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

Ссылка

href не будет использоваться, поэтому вы можете использовать свои собственные предпочтения, например: "" или "#".

Несмотря на то, что мне нравится принятый ответ, я считаю его более элегантным, поскольку он не вводит посторонний параметр. И ответы @ Qwerty и @ Stilltorik приводили к тому, что хэш исчезал после перезагрузки.

Answer 7

Вот что-то вроде того, что я сделал (где «anc» больше ни для чего не используется):

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

и нагрузка:

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 от здесь

Answer 8

Как предлагается в другом ответе, мониторинг хэша также является опцией.В итоге я решил это так, что это потребовало минимальных изменений кода.Если бы я задал исходный вопрос, я бы хотел, чтобы этот вариант был полностью объяснен.

Дополнительным преимуществом является то, что он позволяет вводить дополнительный код для любой из ситуаций (изменение хэша или загрузка страницы).Это также позволяет вам вызывать код изменения хеша вручную с помощью пользовательского хеша.Я использовал jQuery, потому что он делает обнаружение изменений хеша простым куском.

Вот так!

Переместите весь код, который срабатывает при обнаружении хеша, в отдельную независимую функцию:

function openHash(hash) {

  // hashy code goes here

  return false; // optional: prevents triggering href for onclick calls
}

Затем определите ваш хэш для обоих сценариев, например, так:

// page load
$(function () {
  if(typeof location.hash != typeof undefined) {
    // here you can add additional code to trigger only on page load
    openHash(location.hash);
  }
});

// hash change
$(window).on('hashchange', function() {
  // here you can add additional code to trigger only on hash change
  openHash(location.hash);
});

И теперь вы также можете вызывать код вручную, например

<a href="#" onclick="openHash('super-custom-hash')">Magic</a>

Надеюсь, это кому-нибудь поможет!

Answer 9

Попробуйте эту помощь для меня

<a onclick="location.href='link.html'">click me</a>

В вашем теге привязки вместо

<a href="link.html">click me </a>