[JavaScript][jQuery] Zmiana linku na pasku adresu bez przeładowania całej zawartości strony Opcje

[Popek231]

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

Ten post edytował Popek231 15.12.2014, 20:02:03

[janek5]

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

[maviozo]

Dzięki, przyda się

[fate]

Tu masz fajne demo
http://html5demos.com/history
z ciekawosci, po Ci to?

[Popek231]

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?

Ten post edytował Popek231 16.12.2014, 17:14:27

[maviozo]

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"));
});

[Popek231]

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...)

Ten post edytował Popek231 16.12.2014, 18:53:20

[maviozo]

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"));

[Popek231]

na pasku adresu będzie JEDEN LINK, a ładowany będzie plik z DRUGI LINK (z data-link), tak?

[maviozo]

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" ):

Kod

history.replaceState(null, document.title, $(this).attr("href"));

[Popek231]

... 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:

[HTML] pobierz, plaintext 
					  <a href="<?php echo $strona;?>index.php?page=play&items" data-link="<?php echo $pages.$include; ?>items.php" class="linkgamemenu"> Ekwipunek </a>
					<script>
						$(".linkgamemenu").on("click",function(e){
							e.preventDefault();
							$('#play').load($(this).attr("data-link"));
							history.pushState(null,null,.attr("href"));
						});
					</script>
[HTML] pobierz, plaintext 

Ten post edytował Popek231 16.12.2014, 23:50:54

[maviozo]

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.

[Popek231]

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 +

[maviozo]

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:

[HTML] pobierz, plaintext 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
	$(".test a").on('click',function(e){
	var link='/'+$(this).data("link");
	e.preventDefault();
	history.replaceState(null,null,link);
	$('#play').load($(this).attr("href"));
		});
 
	});
</script>
</head>
 
<body>
<div class="test">
<a href="true1.html" data-link="false1.html">1</a>
<a href="true2.html" data-link="false2.html">2</a>
</div>
<div id="play"></div>
</body>
</html>
[HTML] pobierz, plaintext 

Być może że mi też to się w przyszłości przyda, więc dzięki za wątek

Ten post edytował maviozo 18.12.2014, 16:39:11

[shpaque]

podepnę się tutaj - pytanko z ciekawosci:
jak zmienic tylko zawartosc paska url, np wyciac niepotrzebne rzeczy (tylko wizualnie)