Перезагрузка страницы с помощью html anchors (#) - HTML и JS

Ответ 1

Я бы предложил отслеживать привязку в URL-адресе, чтобы избежать перезагрузки, что в значительной степени касается использования якорей для управления потоком. Но все еще здесь. Я бы сказал, что самый простой способ принудительно перезагрузить с помощью простой привязки - использовать

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

где вместо $random введите случайное число (если "dummy" не интерпретируется на стороне сервера). Я уверен, что есть способ перезагрузить страницу после установки якоря, но это, вероятно, сложнее, чем просто реагировать на установленный якорь и делать то, что вам нужно в этой точке.

Затем снова, если вы перезагрузите страницу таким образом, вы можете просто поместить myanchor2 в качестве параметра запроса и отобразить серверную часть вашего материала.

Изменить
Обратите внимание, что ссылка выше будет перезагружаться при любых обстоятельствах, если вам нужно только перезагрузить, если вы еще не находитесь на странице, вам нужно, чтобы фиктивная переменная была более предсказуемой, например,

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

Я бы по-прежнему рекомендовал просто контролировать хэш.

Ответ 2

Простой, как этот

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

пример

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

Здесь что-то вроде того, что я сделал (где "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 от здесь

Ответ 7

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

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

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

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

Ответ 8

Попробуйте это мне помочь

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

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

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

Ответ 9

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

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

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