Zmień adres URL w przeglądarce bez ładowania nowej strony za pomocą JavaScript

Z HTML 5, Użyj history.pushState function . Jako przykład:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

I href:

<a href="#" id='click'>Click to change url to bar.html</a>

Jeśli chcesz zmienić adres URL bez dodawania wpisu do listy przycisków Wstecz, użyj history.replaceState.

Okno.miejsce.href zawiera aktualny adres URL. Można z niego czytać, można do niego dodawać i można go zastąpić, co może spowodować przeładowanie strony.

Jeśli, Jak to brzmi, chcesz zapisać stan javascript w adresie URL, aby można go było dodawać do zakładek, bez przeładowywania strony, dodaj go do bieżącego adresu URL po znaku # i poproś, aby fragment javascript wyzwalany przez zdarzenie onload analizował bieżący adres URL, aby sprawdzić, czy zawiera zapisany stan.

Jeśli używasz a ? zamiast#, będziesz Wymuś przeładowanie strony, ale ponieważ będziesz analizować zapisany stan po załadowaniu, może to nie być problemem; a to sprawi, że przyciski do przodu i do tyłu będą działać poprawnie.

Podejrzewałbym, że nie jest to możliwe, ponieważ byłby to niesamowity problem bezpieczeństwa, gdyby tak było. Na przykład, mogę zrobić stronę, która wyglądała jak strona logowania do banku, a adres URL w pasku adresu wygląda tak jak prawdziwy bank !

Być może jeśli wyjaśnisz, dlaczego chcesz to zrobić, ludzie mogą być w stanie zasugerować alternatywne podejścia...

[Edit w 2011: odkąd napisałem tę odpowiedź w 2008, więcej informacji wyszło na jaw odnośnie technika HTML5 która pozwala na modyfikację adresu URL pod warunkiem, że pochodzi on z tego samego źródła]

Ustawienia zabezpieczeń przeglądarki uniemożliwiają użytkownikom bezpośrednią modyfikację wyświetlanego adresu url. Możesz sobie wyobrazić luki w zabezpieczeniach phishingowych, które mogłyby spowodować.

Jedynym niezawodnym sposobem zmiany adresu url bez zmiany stron jest użycie wewnętrznego linku lub hasha. np.: http://site.com/page.html staje się http://site.com/page.html#item1 . Technika ta jest często używana w hijax(AJAX + preserve history).

Robiąc to często używam linków do akcji z hash jako href, a następnie dodaj zdarzenia kliknięć za pomocą jquery, które używają żądanego skrótu do określenia i delegowania akcji.

Mam nadzieję, że to wskaże Ci właściwą drogę.

jQuery posiada świetną wtyczkę do zmiany adresu URL przeglądarki, o nazwie jQuery-pusher.

JavaScript pushState i jQuery mogą być używane razem, jak:

history.pushState(null, null, $(this).attr('href'));

Przykład:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Using only JavaScript history.pushState(), który zmienia referrer, który jest używany w nagłówku HTTP dla obiektów XMLHttpRequest utworzonych po zmianie stan.

Przykład:

window.history.pushState("object", "Your New Title", "/new-url");

Metoda pushState ():

pushState() pobiera trzy parametry: obiekt stanu, tytuł (który jest obecnie ignorowany) i (opcjonalnie) adres URL. Przyjrzyjmy się każdemu z tych trzech parametrów bardziej szczegółowo:

1. obiekt state - obiekt state jest obiektem JavaScript, który jest powiązany z nowym wpisem history utworzonym przez pushState(). Ilekroć użytkownik przechodzi do nowego stanu, a Zdarzenie popstate jest wywoływane, a właściwość state zdarzenia zawiera kopię obiektu state wpisanego w historii.

   Obiektem stanu może być wszystko, co można serializować. Ponieważ Firefox zapisuje obiekty stanu na dysku użytkownika, aby mogły zostać przywrócone po ponownym uruchomieniu przeglądarki, nakładamy limit rozmiaru 640k znaków na serializowaną reprezentację obiektu stanu. Jeśli przekażesz obiekt stanu, którego serializowana reprezentacja jest większa niż ta do pushState(), metoda będzie wyrzuć wyjątek. Jeśli potrzebujesz więcej miejsca, zachęcamy do korzystania z sessionStorage i / lub localStorage.

2. title - Firefox obecnie ignoruje ten parametr, chociaż może go używać w przyszłości. Przekazanie pustego ciągu powinno być bezpieczne przed przyszłymi zmianami w metodzie. Alternatywnie możesz przekazać krótki tytuł dla stanu, do którego się przenosisz.

3. URL - adres URL nowego wpisu historii jest podany przez to parametr. Zauważ, że przeglądarka nie będzie próbowała załadować tego adresu URL po wywołaniu pushState(), ale może spróbować załadować adres URL później, na przykład po ponownym uruchomieniu przeglądarki. Nowy adres URL nie musi być bezwzględny; jeśli jest względny, zostanie rozwiązany względem bieżącego adresu URL. Nowy URL musi być tego samego pochodzenia co bieżący URL; w przeciwnym razie pushState() wyrzuci wyjątek. Ten parametr jest opcjonalny; jeśli nie jest określony, jest ustawiony na bieżący adres URL dokumentu.

Istnieje komponent Yahoo YUI (Menedżer historii przeglądarki), który może sobie z tym poradzić: http://developer.yahoo.com/yui/history/

Galeria Zdjęć Facebook robi to za pomocą # hash w adresie URL. Oto kilka przykładowych adresów URL:

Przed kliknięciem "dalej":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Po kliknięciu "Dalej":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Uwaga na hash-bang (#!) natychmiast po nowym adresie URL.

Jest miejsce.hash= "tekst" w http://probablyinteractive.com/url-hunter

Jest plugin jquery http://www.asual.com/jquery/address/

Myślę, że to jest to, czego potrzebujesz.

Mój kod to:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

I akcja:

setLocation('http://example.com/your-url-here');

I przykład

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

To wszystko:)

Zastanawiałem się, czy będzie to możliwe, dopóki ścieżka nadrzędna na stronie jest taka sama, tylko coś nowego zostanie do niej dołączone.

Więc powiedzmy, że użytkownik jest na stronie: http://domain.com/site/page.html Wtedy przeglądarka może pozwolić mi zrobić location.append = new.html a strona staje się: http://domain.com/site/page.htmlnew.html i przeglądarka jej nie zmienia.

Lub po prostu pozwól osobie zmienić parametr get, więc let ' s location.get = me=1&page=1.

Tak oryginalna strona staje się http://domain.com/site/page.html?me=1&page=1 i nie odświeża się.

Problem z # polega na tym, że dane nie są buforowane (przynajmniej tak mi się wydaje) kiedy hash jest zmieniany. Tak więc jest tak, jak za każdym razem, gdy ładowana jest nowa strona, podczas gdy przyciski Wstecz i do przodu na stronie NIE-Ajax są w stanie buforować dane i nie spędzają czasu na ponownym ładowaniu danych.

Z tego, co widziałem, Historia Yahoo ładuje wszystkie dane na raz. Wydaje się, że nie wykonuje żadnych żądań Ajax. Więc gdy div jest używany do obsługi różnych metod, dane te nie są przechowywane dla każdego stanu historii.

Odniosłem sukces z:

location.hash="myValue";

Dodaje #myValue do bieżącego adresu URL. Jeśli chcesz wywołać zdarzenie podczas ładowania strony, możesz użyć tej samej location.hash, aby sprawdzić odpowiednią wartość. Pamiętaj tylko, aby usunąć # z wartości zwracanej przez location.hash np.

var articleId = window.location.hash.replace("#","");

Dla mnie działa funkcja - history.replaceState() która jest następująca -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

To nie spowoduje przeładowania strony, można z niej skorzystać przy pomocy zdarzenia javascript