Witam, chciałbym się dowiedzieć jak to genialny Facebook robi, że link, w pasku adresu zmienia się, podczas kliknięcia np. w zdjęcie (wyświetla się nad stroną), bez jakiegokolwiek przeładowania strony (np. okienka z wiadomościami oraz czat pozostają nienaruszone oraz większość strony)...
Jakieś nakierowanie na odpowiedź?
Nie piszcie, że się nie da, bo fb takie coś ma:P
Niby było, ale dawno + do tego w linkach FB nie ma kotwic:D
http://forum.php.pl/lofiversion/index.php/t158483.html
Pełna wersja: [JavaScript][jQuery] Zmiana linku na pasku adresu bez przeładowania całej zawartości strony
Zobacz HTML5 History API
Przykłady: http://code.tutsplus.com/tutorials/a-first...-api--net-28053 http://code.tutsplus.com/tutorials/an-intr...-api--cms-22160
Przykłady: http://code.tutsplus.com/tutorials/a-first...-api--net-28053 http://code.tutsplus.com/tutorials/an-intr...-api--cms-22160
Dzięki, przyda się 
Ponieważ piszę prostą internetową gierkę
Linki w menu gry wyglądają tak:
| <span id=""><a href="java script:void(0)" onClick="$('#play').load('<?php echo $pages.$include; ?>items.php')"> Ekwipunek </a></span> |
i po kliknięciu takiego linku, ścieżka się nie zmienia, a gracz, który odświeży stronę po kliknięciu takowego linku, będzie zmuszony dojść do podstrony samodzielnie (klikając znów w ten link).
Czyli linki mogę wykonać tak:
| <span id=""><a href="<?php echo $strona.'index.php?page=play&items'; ?>" onClick="$('#play').load('<?php echo $pages.$include; ?>items.php')"> Ekwipunek </a></span> |
I ścieżka z HREF będzie na pasku adresu?
Linki w menu gry wyglądają tak:
| <span id=""><a href="java script:void(0)" onClick="$('#play').load('<?php echo $pages.$include; ?>items.php')"> Ekwipunek </a></span> |
i po kliknięciu takiego linku, ścieżka się nie zmienia, a gracz, który odświeży stronę po kliknięciu takowego linku, będzie zmuszony dojść do podstrony samodzielnie (klikając znów w ten link).
Czyli linki mogę wykonać tak:
| <span id=""><a href="<?php echo $strona.'index.php?page=play&items'; ?>" onClick="$('#play').load('<?php echo $pages.$include; ?>items.php')"> Ekwipunek </a></span> |
I ścieżka z HREF będzie na pasku adresu?
Kod
onClick="$('#play').load('<?php echo $pages.$include; ?>items.php')">
Jest nieeleganckie lepiej dodaj klasę do linków choćby tak- tym bardziej, że pewnie dodasz ich więcej i musiałbyś to powielać. A sam link w href powinien być taki sam, jaki podstawisz, bo przy odświeżeniu strony już wyświetli się strona spod "podstawionego" adresu. Zatem np.:
Kod
<a href="<?php echo $pages.$include; ?>items.php" class="history"> Ekwipunek </a></span>
<script>
$(".history").on("click",function(e){
e.preventDefault();
$('#play').load($(this).attr("href"));
});
<script>
$(".history").on("click",function(e){
e.preventDefault();
$('#play').load($(this).attr("href"));
});
no wiem, że nie jest eleganckie...
ale chcę wczytać plik items.php do #play
a w linku chcę mieć LINK.pl/play?items (jeśli przekierowałoby do pliku items.php wywaliłoby użytkownika na stronę główną :D - takie zabezpieczenie z mojej stronyy...)
ale chcę wczytać plik items.php do #play
a w linku chcę mieć LINK.pl/play?items (jeśli przekierowałoby do pliku items.php wywaliłoby użytkownika na stronę główną :D - takie zabezpieczenie z mojej stronyy...)
Jeżeli mają być różne, to zawsze możesz skorzystać z data:
Kod
<a href="JEDEN LINK" data-link="DRUGI LINK">
$('#play').load($(this).data("link"));
$('#play').load($(this).data("link"));
na pasku adresu będzie JEDEN LINK, a ładowany będzie plik z DRUGI LINK (z data-link), tak?
Tak, o ile sobie to odpowiednio ogarniesz w reszcie skryptu, ale to nie powinno być trudne
W tym wypadku, posługując się przykładami z w/w linków, musiałbyś jeszcze dodać (nie sprawdzałem, tylko tak "strzelam" ):
W tym wypadku, posługując się przykładami z w/w linków, musiałbyś jeszcze dodać (nie sprawdzałem, tylko tak "strzelam"
): Kod
history.replaceState(null, document.title, $(this).attr("href"));
... coś działać nie chciało (strona się i tak przeładowywała), więc zrobiłem w każdym linku tak (i działa!):
<a href="java script:void(0);" onClick="$('#play').load('<?php echo $pages.$include; ?>items.php');history.replaceState(null,null,'/index.php?page=play&items');"> Ekwipunek </a>
a przedtem miałem taki kod:
<a href="java script:void(0);" onClick="$('#play').load('<?php echo $pages.$include; ?>items.php');history.replaceState(null,null,'/index.php?page=play&items');"> Ekwipunek </a>
a przedtem miałem taki kod:
Tu masz błąd przecież:
history.pushState(null,null,.attr("href"));
Powinno być
history.pushState(null,null,$(this).attr("href"));
Poza tym warto dodać jeszcze
$(function(){
//tutaj dopiero reszta funkcji
});
ponieważ podstawy nie pisałem tego, bo uznałem to za oczywistość. Nie wiem też którą wersję jquery podwieszasz, .on() nie było od zawsze.
history.pushState(null,null,.attr("href"));
Powinno być
history.pushState(null,null,$(this).attr("href"));
Poza tym warto dodać jeszcze
$(function(){
//tutaj dopiero reszta funkcji
});
ponieważ podstawy
nie pisałem tego, bo uznałem to za oczywistość. Nie wiem też którą wersję jquery podwieszasz, .on() nie było od zawsze.
tak czy inaczej.. tamto nie działało:D
jeśli będę mieć chęci przerobię to (ale wątpię ze względu na to, że linków jest tam zaledwie 5 - szybkie do edycji)
Dzięki, że pomogłeś, masz u mnie wielkieeeego +
jeśli będę mieć chęci przerobię to (ale wątpię ze względu na to, że linków jest tam zaledwie 5 - szybkie do edycji)
Dzięki, że pomogłeś, masz u mnie wielkieeeego +
Męczył mnie ten temat, a że znalazłem chwilę czasu to sprawdziłem doświadczalnie
Okazało się, że dostawałem błąd SecurityError: The operation is insecure, można wygoglować, co to powoduje. W skrócie chodzi o to, żeby przeglądarka nie pomyślała, że chcesz podstawić coś z nie swojej domeny.
Ten skrypt postawiony na serwerze DZIAŁA na 100%, wyświetla zawartość trueX.html a w adresie podstawia falseX.html:
Okazało się, że dostawałem błąd SecurityError: The operation is insecure, można wygoglować, co to powoduje. W skrócie chodzi o to, żeby przeglądarka nie pomyślała, że chcesz podstawić coś z nie swojej domeny.
Ten skrypt postawiony na serwerze DZIAŁA na 100%, wyświetla zawartość trueX.html a w adresie podstawia falseX.html:
Być może że mi też to się w przyszłości przyda, więc dzięki za wątek
podepnę się tutaj - pytanko z ciekawosci:
jak zmienic tylko zawartosc paska url, np wyciac niepotrzebne rzeczy (tylko wizualnie)
jak zmienic tylko zawartosc paska url, np wyciac niepotrzebne rzeczy (tylko wizualnie)
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.