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

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

8 голосов
/ 14 декабря 2011

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

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

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

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

Ответы [ 5 ]

12 голосов
/ 14 декабря 2011

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

См. здесь для краткого изложения этих методов.

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

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

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

6 голосов
/ 20 января 2013

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

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

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

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

2 голосов
/ 14 декабря 2011

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

Однако вы можете изменить идентификатор фрагмента : (в 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>

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

1 голос
/ 15 декабря 2011

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

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

0 голосов
/ 14 декабря 2011

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

...