Wie ktoś jak to jest zrobione np. na fecebook`u to, że skrypt potrafi wykryć kiedy użytkownik przechodzi do strony wstecz?
Mam dynamiczną stronę, na której treść jest ładowana przez js i kiedy przechodze do jakiejś podstrony to zmieniam adres na adresstrony.pl/#podstrona.
Chciałbym wykryć kiedy użytkownik przechodzi wstecz/dalej używając nawigacji przeglądarki i zaserwować mu odpowiednią treść.
Na facebooku jest to wogóle w niezrozumiały dla mnie sposób rozwiązane, ponieważ zmienia się adres w przeglądarce przed znakiem '#', a mimo to strona nie jest wcale odświeżana.
Oszczędzi mi ktoś zabawy w reverse engineering i poda link do jakiegoś wytłumaczenia?
Z góry dzięki.
Wykrycie zmiany adresu naturalnie mógłbym zrealizować przy pomocy setInterval, ale z oczywistych względów tego rozwiązania chciałbym uniknąć.
Pełna wersja: History events
http://benalman.com/projects/jquery-hashchange-plugin/ - to jest w jQuery, nie każ mi analizować kodu 
--edit--
Tak na szybko patrząc tam też jest setInterval. Ta metoda w gruncie rzeczy nie jest zła. Takie obciążenie dla przeglądarki to żadne obciążenie.
--edit--
Tak na szybko patrząc tam też jest setInterval. Ta metoda w gruncie rzeczy nie jest zła. Takie obciążenie dla przeglądarki to żadne obciążenie.
Cytat(kamil4u @ 25.08.2011, 22:31:03 ) 
http://benalman.com/projects/jquery-hashchange-plugin/ - to jest w jQuery, nie każ mi analizować kodu
--edit--
Tak na szybko patrząc tam też jest setInterval. Ta metoda w gruncie rzeczy nie jest zła. Takie obciążenie dla przeglądarki to żadne obciążenie.
--edit--
Tak na szybko patrząc tam też jest setInterval. Ta metoda w gruncie rzeczy nie jest zła. Takie obciążenie dla przeglądarki to żadne obciążenie.
Nie każę Ci niczego analizować, ale dzięki za pomoc.
JQuery nie używam w aktualnym projekcie, a już skrobnąłem coś takiego na szybko przy pomocy EventListener`a.
Kod
var MyHistory = (function(){
var el = EventListener(['change']);
var lastHref = location.href;
setInterval(function(){
if( location.href !== lastHref ){
el.invoke('change', location.href, lastHref);
lastHref = location.href;
}
}, 20);
return {
addEventListener: el.add,
removeEventListener: el.remove
};
})();
MyHistory.addEventListener('change', function(curr, last){
console.log(last + ' -> ' + curr);
});
var el = EventListener(['change']);
var lastHref = location.href;
setInterval(function(){
if( location.href !== lastHref ){
el.invoke('change', location.href, lastHref);
lastHref = location.href;
}
}, 20);
return {
addEventListener: el.add,
removeEventListener: el.remove
};
})();
MyHistory.addEventListener('change', function(curr, last){
console.log(last + ' -> ' + curr);
});
Tylko tak jak już pisałem wcale mi się to rozwiązanie nie podoba, dlatego to rozwiązanie potraktuję jako tymczasowe. Na facebooku to jakoś zrobili, więc jeśli nikt nic nie podpowie to będę musiał przeanalizować ich kod.
Używanie # do ajax to jakaś pomyłka, zobacz sobie jak ma to rozwiązane GitHub, korzystają z historyState i zmienia się Tobie normalnie link bez żadnego przeładowania (prócz requestu ajaksowego).
https://github.com/zendframework/zf2/tree/m...r/documentation
I kliknij "Wyżej" a później pobaw się klikanie w foldery, a zobaczysz że cała strona się nie odświeża ale link się zmienia, tho przy nawigacji przeglądarki nie zmieniają href'a - nie wiem czemu.
Sam kod tego skryptu możesz znaleźć (pogooglaj) bo github ma uwolniony swój kod ... na githubie
https://github.com/zendframework/zf2/tree/m...r/documentation
I kliknij "Wyżej" a później pobaw się klikanie w foldery, a zobaczysz że cała strona się nie odświeża ale link się zmienia, tho przy nawigacji przeglądarki nie zmieniają href'a - nie wiem czemu.
Sam kod tego skryptu możesz znaleźć (pogooglaj) bo github ma uwolniony swój kod ... na githubie
Inny pomysł to HTML5 i API history - ale to nowość i osobiście się tym nie bawiłem, więc pewny nie jestem.
setInterval jest chyba najlepszym wyjściem. Dla obecnych komputerów takie odświeżanie to pestka, użytkownik w ogóle nie zauważy, że coś takiego się odbywa. Nie przypominam sobie innych sposobów, ani w google nic ciekawego nie ma. Widzisz jakieś inne wady?
Jak znajdziesz coś sam to nie zapomnij się tu z nami podzielić jakimś innym, wydajniejszym sposobem.
--edit--
Więc może jednak można lepiej. Jak coś takiego napiszesz to tym bardziej byłoby miło, gdybyś się z nami podzielił swoimi spostrzeżeniami,
setInterval jest chyba najlepszym wyjściem. Dla obecnych komputerów takie odświeżanie to pestka, użytkownik w ogóle nie zauważy, że coś takiego się odbywa. Nie przypominam sobie innych sposobów, ani w google nic ciekawego nie ma. Widzisz jakieś inne wady?
Jak znajdziesz coś sam to nie zapomnij się tu z nami podzielić jakimś innym, wydajniejszym sposobem.
--edit--
Więc może jednak można lepiej. Jak coś takiego napiszesz to tym bardziej byłoby miło, gdybyś się z nami podzielił swoimi spostrzeżeniami,
Właśnie o to chodziło co napisał @melkorm.
Tu jest wszystko wyjaśnione:
https://developer.mozilla.org/en/DOM/Manipu...browser_history
Facebook właśnie też tą "magię" stosuje, że zmiania się adres w pasku a strona pozostaje nieodświerzona. I też sobie przypomniałem, że widziałem to już na githubie.
@kamil4u co do tego rozwiązania, które wyżej zamieściłem, oczywiście ono działa, ale:
- jest nieeleganckie
- tak jak już zauważyłeś niepotrzebnie obciąża przeglądarkę (jedna strona niewiele, ale wiele otwartych już bardziej). Ogólnie moim zdaniem strona, która nie jest aktualnie używana tylko jest sobie w zakładce w tle nie powinna zmuszać procesora do jakiejś pracy (patrz punkt pierwszy). Małe obciążenie - co powiesz o urządzeniach mobilnych?
- po trzecie istnieje ryzyko niewykrycia takiego zdarzenia
Jeśli napiszę coś przydatnego, to oczywiście podzielę się.
Tu jest wszystko wyjaśnione:
https://developer.mozilla.org/en/DOM/Manipu...browser_history
Facebook właśnie też tą "magię" stosuje, że zmiania się adres w pasku a strona pozostaje nieodświerzona. I też sobie przypomniałem, że widziałem to już na githubie.
@kamil4u co do tego rozwiązania, które wyżej zamieściłem, oczywiście ono działa, ale:
- jest nieeleganckie
- tak jak już zauważyłeś niepotrzebnie obciąża przeglądarkę (jedna strona niewiele, ale wiele otwartych już bardziej). Ogólnie moim zdaniem strona, która nie jest aktualnie używana tylko jest sobie w zakładce w tle nie powinna zmuszać procesora do jakiejś pracy (patrz punkt pierwszy). Małe obciążenie - co powiesz o urządzeniach mobilnych?
- po trzecie istnieje ryzyko niewykrycia takiego zdarzenia
Jeśli napiszę coś przydatnego, to oczywiście podzielę się.
Niemniej bez setInterval i tak się nie obejdzie
Wszystko co nie ma HTML5 będzie musiało tak działać. W sumie możliwości HTML5 znam jak przez mgłę, dlatego pewien nie byłem.
Dałoby się wyłączyć sprawdzanie czasowe dla zakładek w tle.
I tak będą obsługiwane przez setInterval - w większości, a te co mają obsługę HTML5 i tak mają potężne procesory.
Niezwykle małe, ale fakt istnieje.
Chętnie przeanalizuję i dowiem się czegoś nowego. Były już takie tematy jak Twoje, ale większość(wszystkie?) stanęła na setInteval
Niemniej zachęcam i tak do korzystania z obsługi historii w html5. Zawsze to krok na przód.
Powodzenia!
Wszystko co nie ma HTML5 będzie musiało tak działać. W sumie możliwości HTML5 znam jak przez mgłę, dlatego pewien nie byłem.
Cytat
Ogólnie moim zdaniem strona, która nie jest aktualnie używana tylko jest sobie w zakładce w tle nie powinna zmuszać procesora do jakiejś pracy (patrz punkt pierwszy).
Dałoby się wyłączyć sprawdzanie czasowe dla zakładek w tle.
Cytat
Małe obciążenie - co powiesz o urządzeniach mobilnych?
I tak będą obsługiwane przez setInterval - w większości, a te co mają obsługę HTML5 i tak mają potężne procesory.
Cytat
- po trzecie istnieje ryzyko niewykrycia takiego zdarzenia
Niezwykle małe, ale fakt istnieje.
Cytat
Jeśli napiszę coś przydatnego, to oczywiście podzielę się.
Chętnie przeanalizuję i dowiem się czegoś nowego. Były już takie tematy jak Twoje, ale większość(wszystkie?) stanęła na setInteval
Niemniej zachęcam i tak do korzystania z obsługi historii w html5. Zawsze to krok na przód.
Powodzenia!
Masz rację co do tego, że rozwiązanie z setInterval ma pewną przewagę w stosunku do History API. To drugie nie działa w IE (nawet IE 9). Tam trzeba stosować tradycyjny sposób, albo # + setInterval.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.