Удалить фрагмент в URL-адресе с помощью JavaScript без перезагрузки страницы

Фон: У меня есть HTML-страница, которая позволяет расширять определенный контент. Поскольку для такого расширения необходимо загружать только небольшие части страницы, это делается с помощью JavaScript, а не путем перехода на новую страницу URL / HTML. Однако в качестве бонуса пользователь может постоянно ссылаться на такие расширенные разделы, то есть отправлять кому-то еще URL-адрес, например

http://example.com/#foobar

и немедленно открыть категорию "foobar" для этого другого пользователя. Это работает с использованием parent.location.hash = 'foobar', так что с этой частью все в порядке.

Теперь вопрос: Когда пользователь закрывает такую ​​категорию на странице, я хочу снова очистить фрагмент URL, то есть превратить http://example.com/#foobar в http://example.com/, чтобы обновить отображение постоянной ссылки. Однако при использовании parent.location.hash = '' происходит перезагрузка всей страницы (например, в Firefox 3), чего я бы хотел избежать. Использование window.location.href = '/#' не приведет к перезагрузке страницы, но оставит несколько некрасивый знак «#» в URL-адресе. Так есть ли способ в популярных браузерах удалить привязку URL-адреса, включая знак «#», без запуска обновления страницы?

Это связанный вопрос - интересное чтение.

Filip Dupanović 23.05.2011 13:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
46
1
50 677
8
Перейти к ответу Данный вопрос помечен как решенный

Ответы 8

Поскольку вы управляете действием хеш-значения, почему бы просто не использовать токен, который означает «ничего», например «#_» или «# по умолчанию».

Думаю, это идея, достойная рассмотрения.

Jason Bunting 06.11.2008 19:55

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

Philipp Lenssen 07.11.2008 16:06

Очевидно. Ваши скрипты должны работать без хэша.

Robin Rodricks 05.05.2009 14:55
$(document).ready(function() {
        $(".lnk").click(function(e) {
            e.preventDefault();
            $(this).attr("href", "stripped_url_via_desired_regex");
        });
    });

Спасибо, Флорин, не могли бы вы объяснить, что делает этот код?

Philipp Lenssen 07.11.2008 16:05

Так что используйте

parent.location.hash = '' первый

тогда делай

window.location.href=window.location.href.slice(0, -1);

изменение location.href каким-либо образом перезагрузит страницу.

Evgeny 31.10.2010 23:18

Это действительно помогает избавиться от всего фрагмента, включая '#', но Евгений прав, он перезагружает страницу

JCarter 13.07.2012 00:33

Есть также другой вариант вместо использования хеша, вы можете использовать javascript: void(0); Пример: <a href = "javascript:void(0);" class = "open_div">Open Div</a>

Я думаю, это также зависит от того, когда вам нужна такая ссылка, поэтому вам лучше проверить следующие ссылки:

Как пользоваться: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ или проверьте дискуссию о том, что лучше здесь: Какое значение «href» следует использовать для ссылок JavaScript: «#» или «javascript: void (0)»?

Как говорили другие, вы не можете этого сделать. Плюс ... серьезно, как автор jQuery Ajaxy - я уже много лет развертываю полные веб-сайты на ajax - и я могу гарантировать, что ни один конечный пользователь никогда не жаловался или, возможно, когда-либо замечал, что происходит хеширование, пользователь не заботятся, пока это работает, и они получают то, за чем пришли.

Однако правильным решением является HTML5 PushState / ReplaceState / PopState ;-) Который больше не нуждается в идентификаторе фрагмента: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history Для проекта, совместимого с HTML5 и HTML4, который поддерживает эту функциональность состояния HTML5, ознакомьтесь с https://github.com/browserstate/History.js :-)

Для этого есть более веские причины, чем «забота пользователя». Например: wistia.com/blog/fresh-url

Diego Jancic 21.12.2016 20:31

Вы можете использовать блестящие новые методы HTML5 window.history.pushState и replaceState, как описано в ASCIIcast 246: Состояние истории AJAX и в блоге GitHub. Это позволяет вам изменить весь путь (в пределах одного исходного хоста), а не только фрагмент. Чтобы опробовать эту функцию, просматривать репозиторий GitHub с недавним браузером.

Ответ принят как подходящий

Как уже упоминалось, replaceState в HTML5 можно использовать для удаления фрагмента URL.

Вот пример:

// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");

// slice off the remaining '#' in HTML5:    
if (typeof window.history.replaceState == 'function') {
  history.replaceState({}, '', window.location.href.slice(0, -1));
}

Твердый. Я ценю обнаружение возможности удалить #, но имеет обратную совместимость.

Ronnie Royston 03.06.2016 00:00

на месте ответ. Я использую это сейчас

Jones G 23.07.2019 00:34

Поместите этот код в головную часть.

<script type = "text/javascript">
    var uri = window.location.toString();
    if (uri.indexOf("?") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("?"));
        window.history.replaceState({}, document.title, clean_uri);
    }
</script>

Другие вопросы по теме