Как удалить параметры в URL и отобразить его в адресной строке, не вызывая перенаправления в Javascript?

Я нашел множество ответов о том, как извлечь URL-адреса без параметров.

Как переписать URL-адрес в адресной строке без перезагрузки страницы новым URL-адресом?

shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Causes redirect

цель состоит в том, чтобы извлечь параметры в JavaScript, но не отображает их в адресной строке.

8
address-bar javascript parameters url url-rewriting

5 ответов

в современных браузерах с поддержкой объектом истории, вы можете использовать либо history.replaceState() или history.pushState() изменить текущий URL без изменения текущей страницы. Существуют ограничения на то, что вы можете изменить (например, вы не сможете изменить домен/происхождение таким образом по соображениям безопасности).

посмотреть здесь для резюме этих методов.

история браузера-это запись того, где вы были в своем сеансе просмотра. .replaceState() позволяет замените текущий элемент в списке истории другим. .pushState() добавляет новый элемент в историю браузера и оба изменить URL отображается в строке URL браузера без перезагрузки страницы. Вы выбираете, какой метод использовать в зависимости от того, как вы хотите, чтобы кнопка "Назад" браузера вела себя для этой конкретной записи страницы.

примечание: эти API поддерживаются в IE 10 и более поздних версиях.

в более старых версиях браузера без поддержки API истории, единственная часть URL-адрес можно изменить без перезагрузки страницы-это хэш-тег (часть после # символ) в конце URL-адреса.

12

в html5 возможна перезапись url без перезагрузки страницы (все равно вы не можете изменить доменное имя по соображениям безопасности), используя history api вы можете написать:

history.replaceState("object or string", "title", "/another-new-url");

в котором первые два параметра как-то произвольны, а третий параметр-новый url (не включая доменное имя). Если вы хотите включить кнопку Назад для возврата к предыдущему url-адресу, используйте pushState вместо replaceState выше. Подробнее об этих функциях читайте в этом блог пост.

Что касается поддержки браузера, она поддерживается в последних версиях Firefox и Chrome, но только в IE10+, что пока не очень распространено. Подробнее см. матрица совместимости или детали реализации браузера.

6

вы не можете изменить значение в адресной строке без перенаправления. Это была бы мечта фишингового мошенника!

Вы можете, однако, изменить идентификатор фрагмента: (в JavaScript window.location.hash значение)

<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<script>
window.onload = function() {
    window.location.hash = "Loaded!";
    document.getElementById("click-me").onclick = function() {
        window.location.hash = "Click!";
        document.getElementById("click-me").onclick = function() {
            window.location.hash = "Clicked AGAIN!";
        };
    };
}
</script>
<body>
<div>
<input type="button" id="click-me" value="click me!" />
</div>
</body>
</html>

но изменение строки запроса будут перенаправлены страницу.

2

вы можете использовать новый pushstate, который является частью API истории HTML 5, который позволяет вам изменять URL-адрес без фактической перезагрузки браузера.

проверить http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate для быстрого примера, и http://diveintohtml5.info/history.html для более подробных примеров и ограничений:

1

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

0