Как сделать так, чтобы кнопка "Назад" браузера пропускала внутреннюю навигацию по странице и возвращалась на предыдущую страницу

#javascript #jquery #asp.net-mvc #history #back

Вопрос:

Мы используем несколько вкладок на некоторых страницах нашего веб-приложения MVC, и после просмотра нескольких из них, а затем нажатия кнопки «Назад» URL-адреса соответственно изменяются, но вам нужно щелкнуть по всем из них, пока вы не перейдете на предыдущую страницу.

Что я хотел бы сделать, так это вернуться на предыдущую страницу каждый раз, когда я нажимаю кнопку «Назад» браузера, поэтому в основном пропускаю все URL-адреса, содержащие»#». Например , если мне page2#tab3 понравится: page1 -> page2#tab1 -> page2#tab2 -> page2#tab3 , я хотел бы page2#tab3 -> page1 сделать это, нажав кнопку «Назад».

Кроме того, у нас уже есть собственные кнопки навигации, но мы также хотели бы реализовать это.

1. URL — адреса меняются соответственно -используете ли вы pushState ? Изменить на replaceState

2. @freedomn-m это больше похоже на то, что они используют простой <a href=»#foo»>

3. @Kaiido вполне возможно, но тогда зачем называть это «навигацией по внутренней странице»? Явно нуждается в дополнительной информации от OP.

4. Если вы говорите о кнопке «Назад» браузера, вы не можете настроить ее поведение. Вам нужно манипулировать историей, как упоминает @freedomn-m. Было бы лучше, если бы вы добавили ссылку где-нибудь, которая четко указывает, что пользователь будет перенаправлен на страницу 1 со страницы 2#tab3.

5. да, извините, если я не понял «навигацию по внутренней странице», это навигация по хэшу. @CoodleNoodle у нас действительно есть ссылки/кнопки, которые это делают, но мне дали задание посмотреть, есть ли способ сделать то, что я описал в вопросе, с помощью кнопки возврата браузера

Ответ №1:

Вы можете использовать onhashchange прослушиватель для удовлетворения ваших индивидуальных потребностей. Пожалуйста, проверьте https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

Также вы можете изменить HistoryAPI в соответствии с вашими потребностями. Пожалуйста, проверьте https://developer.mozilla.org/en-US/docs/Web/API/History

1. спасибо, я тоже узнал об onhashchange этом за это время, но теперь у меня проблема с обнаружением пользователя, нажимающего кнопку «Назад». Я пробовал использовать PerformanceNavigationTiming, но он работает не так, как ожидалось, по крайней мере, не в Chrome. Вместо того, чтобы вводить «назад-вперед», по какой-то причине всегда «перемещаться». developer.mozilla.org/en-US/docs/Web/API/…

2. Вы можете поддержать мой ответ, если это поможет вам двигаться вперед. Логика должна заключаться в том, чтобы проверить наличие # в URL-адресе в этом прослушивателе, а затем заменить этот элемент в истории первым URL-адресом без хэша.

3. Извините, у меня недостаточно репутации, чтобы голосовать. 🙁 Кроме того, моя проблема все еще не решена, и она отложена, у меня есть другие более неотложные задачи, которые нужно закончить прямо сейчас. В любом случае спасибо, я бы определенно поддержал ваш ответ, если бы мог.

Ответ №2:

в react вы можете сделать это с помощью крючка истории. Но я не знаю, как это реализовать в обычном проекте JS.