Pytanie Zmodyfikuj adres URL bez ponownego ładowania strony


Czy mogę zmodyfikować adres URL bieżącej strony bez ponownego ładowania strony?

Chciałbym uzyskać dostęp do tej części przed # hash, jeśli to możliwe.

Potrzebuję tylko zmienić porcję po domena, więc nie jest tak, że naruszam zasady międzydomenowe.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

1810
2018-05-05 10:54


pochodzenie


Możesz to zrobić we Flashu. Potrzebujesz tylko małej aplikacji w tle i przekazujesz JavaScript do pamięci flash, aby zmodyfikować pasek lokalizacji. - Nick Berardi
Aby ułatwić zrozumienie pytania, na przykład Facebook robi to po otwarciu zdjęcia. Pasek adresu URL zmienia się BEZPOŚREDNIO w to zdjęcie, dzięki czemu możesz udostępnić adres URL bez utraty miejsca w witrynie. Zapamiętaj strony na podstawie kadrowania ostatniej dekady? Możesz uzyskać adres URL strony głównej, ponieważ zmieniają się tylko wewnętrzne ramki. I to było okropne. - Spidey


Odpowiedzi:


Można to teraz zrobić w Chrome, Safari, FF4 + i IE10pp4 +!

Zobacz odpowiedź tego pytania, aby uzyskać więcej informacji: Aktualizacja paska adresu z nowym adresem URL bez hash lub ponowne załadowanie strony

Przykład:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Możesz wtedy użyć window.onpopstate aby wykryć nawigację przycisku wstecz / do przodu:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Aby uzyskać bardziej szczegółowe spojrzenie na manipulowanie historią przeglądarki, patrz ten artykuł MDN.


1633
2017-07-28 15:30



Jak działa Facebook w IE7? - Dominic Tobias
@ CHiRiLo sprawdź history.js która zapewnia rezerwę w przeglądarkach, które nie obsługują interfejsu API historii HTML5. - David Murdoch
@infensus Jeśli w adresie URL znajduje się znak #, dla którego istniała sztuczka lat.. - Izkata
Co oznacza część "pp4 +" w "IE10pp4 +"? - Scott David Tesler
podgląd platformy 4 - David Murdoch


HTML5 wprowadził history.pushState() i history.replaceState() metody, które pozwalają odpowiednio dodawać i modyfikować wpisy historii.

window.history.pushState('page2', 'Title', '/page2.php');

Przeczytaj więcej na ten temat tutaj


382
2017-08-17 13:59



Może nie działać dalej file:/// ze względów bezpieczeństwa, np. Firefox 30. Przetestuj localhost z python -m SimpleHTTPServer. - Ciro Santilli 新疆改造中心 六四事件 法轮功
Użyłem tego na żargonie kodów. - jned29
Oczekuje się, że pierwszy parametr będzie obiektem, a nie tylko łańcuchem. - Alexis Wilke
IMO to naprawdę najlepsza odpowiedź. Jeśli chcesz tylko zaktualizować bieżący adres URL ({}, null, strNewPath), wszystko, co musisz zrobić. Najlepiej przetestować najpierw pod adresem if (history.pushState) {} - Craig Jacobs
możesz po prostu wpisać null dla pierwszych 2 parametrów, jeśli nie chcesz ich zmieniać. Możesz także użyć bezwzględnego adresu URL dla trzeciego parametru. - Andrew


UWAGA: Jeśli pracujesz z HTML5 przeglądarka, powinieneś zignorować tę odpowiedź. Jest to teraz możliwe, co widać w innych odpowiedziach.

Nie ma sposobu na modyfikację URL w przeglądarce bez ponownego ładowania strony. Adres URL reprezentuje ostatnią wczytaną stronę. Jeśli to zmienisz (document.location), a następnie przeładuje stronę.

Jednym z oczywistych powodów jest to, że piszesz stronę www.mysite.com to wygląda jak strona logowania do banku. Następnie zmieniasz pasek adresu przeglądarki, by powiedzieć www.mybank.com. Użytkownik będzie całkowicie nieświadomy tego, na co naprawdę patrzy www.mysite.com.


96
2018-05-05 10:57



Nie chcę zmieniać domeny, tylko ścieżkę i nazwę pliku. - Robinicks
To nadal nie zatrzymuje potencjalnych zagrożeń bezpieczeństwa, ponieważ przeglądarka nie ma pojęcia, że ​​domena / mysite i domena / strona zewnętrzna są uważane za "bezpieczne" przez użytkownika. Może powinno być pytanie, dlaczego chcesz zmienić adres URL? Jeśli ma to zasłonić użytkownika, możesz po prostu uruchomić aplikację w elemencie iframe. - Robin Day
Możesz to zrobić za pomocą Flasha. Pozwoli to na modyfikację adresu URL bez składania żądania. Jest to możliwe, ponieważ Flash działa poza przeglądarką, ale bardzo ściśle z nią. - Nick Berardi
Muszę powiedzieć, że istnieją całkowicie uzasadnione powody, dla których chce się zmodyfikować adres URL w pasku adresu po stronie klienta. Na przykład, jeśli masz tabelę danych z stronicowaniem, sortowaniem i filtrowaniem i chcesz, aby te rzeczy były zasilane przez Ajax, ale nadal aktualizuj adres URL, aby aktualny stan strony był niezmienny. Rozumiem ryzyko związane z bezpieczeństwem, modyfikując nazwę domeny (phishing itp.), Ale dlaczego przeglądarki nie pozwalają na modyfikowanie tylko części adresu URL z domeny najwyższego poziomu za pomocą skryptu? - Sunday Ironfoot
ta odpowiedź nie jest już w 100% prawdziwa. Zobacz moją odpowiedź dla szczegółów. - David Murdoch


Możesz także użyć HTML5 replaceState jeśli chcesz zmienić adres URL, ale nie chcesz dodawać wpisu do historii przeglądarki:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

To mogłoby "złamać" funkcjonalność przycisku Wstecz. Może to być wymagane w niektórych przypadkach, takich jak galeria obrazów (w której przycisk Wstecz ma wrócić do strony głównej galerii zamiast cofać się do każdego wyświetlanego obrazu), jednocześnie nadając każdemu obrazowi własny unikalny adres URL.


93
2017-11-19 10:32





parent.location.hash = "hello";

73
2018-05-13 22:14



Chcę zmienić adres URL, a nie tylko hash - #mydata - Robinicks
Zmiana hasha może być przydatna w ajax, ponieważ jest to rodzaj stanu bez używania plików cookie, jest bookmarkable i kompatybilny z przyciskami wstecznymi przeglądarki. Gmail korzysta z tego w dzisiejszych czasach, aby był bardziej przyjazny dla przeglądarki. - Matthew Lock
@Jarvis: jaka jest różnica? - noisy
@neisy Śledzenie po stronie serwera nie może zobaczyć skrótów, chyba że wysłano je bezpośrednio do usługi śledzenia. - RedYetiCo
nie jest to użyteczne, jeśli używasz frameworku mvc, który kieruje się po haszowaniu, na przykład szkieletu. - catbadger


Oto moje rozwiązanie: (newUrl to twój nowy adres URL, który chcesz zastąpić bieżącym)

history.pushState({}, null, newUrl);

45
2018-06-10 18:25



Najlepiej przetestować najpierw pod adresem if (history.pushState) {} Na wszelki wypadek w starej przeglądarce. - Craig Jacobs
To już nie działa w Firefoksie: operacja jest niezabezpieczona. - kkatusic


Odpowiednikiem HTML5 replaceState, o czym już wspomniały Vivart i geo1701. Jednak nie jest obsługiwany we wszystkich przeglądarkach / wersjach. History.js opakowuje funkcje stanu HTML5 i zapewnia dodatkowe wsparcie dla przeglądarek HTML4.


25
2017-11-21 11:09





Przed HTML5 możemy użyć:

parent.location.hash = "hello";

i:

window.location.replace("http:www.example.com");

Ta metoda przeładuje twoją stronę, ale HTML5 wprowadził history.pushState(page, caption, replace_url) to nie powinno przeładować twojej strony.


20
2018-01-24 08:49



Problem z history.pushState(..) jest to, że jeśli chcesz przekierować do innej domeny, obowiązują zasady dotyczące domen. Podczas gdy z window.location.replace(..)możliwe jest przekierowanie do innej domeny. - OSWorX


Jeśli próbujesz zrobić to zezwalać użytkownikom na zakładkowanie / udostępnianie stron i nie potrzebujesz dokładnie tego adresu, a nie używasz zakotwiczeń dla innych elementów, możesz to zrobić na dwa sposoby. Części; używasz omawianego powyżej location.hash, a następnie zaimplementujesz sprawdzanie na stronie głównej, aby znaleźć URL z hash kotwicą i przekierowujesz do następnego wyniku.

Na przykład:

1) Użytkownik jest włączony www.site.com/section/page/4

2) Użytkownik wykonuje pewne działanie, które zmienia adres URL www.site.com/#/section/page/6 (z hash). Załóżmy, że na stronie znajduje się właściwa treść strony 6, więc oprócz skrótu użytkownik nie jest zbytnio zaniepokojony.

3) Użytkownik przekazuje ten adres URL innej osobie lub tworzy zakładkę

4) Ktoś inny, lub ten sam użytkownik w późniejszym terminie, idzie do www.site.com/#/section/page/6

5) Kod na www.site.com/ przekierowuje użytkownika do www.site.com/section/page/6, używając czegoś takiego:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Mam nadzieję, że ma sens! Jest to przydatne podejście w niektórych sytuacjach.


18
2018-04-19 11:43





Wszelkie zmiany położenia (albo window.location lub document.location) spowoduje żądanie nowego adresu URL, jeśli nie zmienisz tylko fragmentu adresu URL. Jeśli zmienisz adres URL, zmienisz adres URL.

Użyj technik przepisywania adresu URL po stronie serwera, takich jak Mod_rewrite Apache'a jeśli nie lubisz adresów URL, z których obecnie korzystasz.


12
2018-05-05 10:58



Czy mogę użyć "location.pathname" ?? - Robinicks
Nie, zmiana tego atrybutu spowoduje również żądanie. - Gumbo