Страница силы перезагружает с привязками к HTML (#) - HTML & JS
Скажите, что я нахожусь на названной странице /example#myanchor1 где myanchor привязка на странице. Я хотел бы связаться с /example#myanchor2, но вынудите страницу перезагрузить при выполнении так.
Причина состоит в том, что я выполняю js для обнаружения привязки от URL при загрузке страницы. Проблема (обычно ожидаемое поведение) здесь, хотя, состоит в том, что браузер просто отправляет меня к той определенной привязке на странице, не перезагружая страницу.
Как я пошел бы о выполнении так? JS в порядке.
3 ответа
Я бы посоветовал отслеживать привязку в URL-адресе, чтобы избежать перезагрузки, в этом и состоит смысл использования привязок для потока управления. Но все же здесь идет. Я бы сказал, что самый простой способ принудительно перезагрузить с помощью простой якорной ссылки - использовать
<a href="?dummy=$random#myanchor2"></a>
, где вместо $ random вставить случайное число (при условии, что «пустышка» не интерпретируется на стороне сервера ). Я уверен, что есть способ перезагрузить страницу после установки привязки, но это, вероятно, сложнее, чем просто реагировать на установленную привязку и делать то, что вам нужно в этот момент.
Опять же, если вы перезагрузите страницу таким образом, вы можете просто указать myanchor2 в качестве параметра запроса и отрендерить свой материал на стороне сервера.
Изменить
Обратите внимание, что ссылка выше будет перезагружаться при любых обстоятельствах, если вам нужно перезагрузить только, если вы еще не на странице, вам нужно, чтобы фиктивная переменная была более предсказуемой, например
<a href="?dummy=myanchor2#myanchor2"></a>
Тем не менее, я все же рекомендую просто следить за хешем.
Какой смысл использовать клиентский JS, если вы все равно собираетесь постоянно перезагружать страницу? Возможно, лучше отслеживать изменения в хэше, даже если страница не перезагружается.
На этой странице есть библиотека хеш-монитора и подключаемый модуль jQuery.
Если вы действительно хотите перезагрузить страницу, почему бы не использовать строку запроса (? Foo) вместо хеша?
Другой вариант, который еще не упоминался, - это привязать прослушиватели событий (например, с помощью jQuery ) к интересующим вас ссылкам about (может быть, все, а может и нет) и заставить слушателя вызывать любую функцию, которую вы используете.
Редактировать после комментария
Например, у вас может быть этот код в вашем 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) или измените существующий код, чтобы принять то, что вы передаете ему от нового кода.