Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][jQuery] Zmiana linku na pasku adresu bez przeładowania całej zawartości strony
Popek231
post 15.12.2014, 20:01:04
Post #1





Grupa: Zarejestrowani
Postów: 71
Pomógł: 2
Dołączył: 30.03.2012
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

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


--------------------
Pomogłem? Wiesz co kliknąć w odpowiednim miejscu :)
Go to the top of the page
+Quote Post
janek5
post 16.12.2014, 00:46:39
Post #2





Grupa: Zarejestrowani
Postów: 13
Pomógł: 1
Dołączył: 6.12.2014

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
maviozo
post 16.12.2014, 09:03:47
Post #3





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

Dzięki, przyda się smile.gif
Go to the top of the page
+Quote Post
fate
post 16.12.2014, 11:40:25
Post #4





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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


--------------------
Sklep ubrania lniane dla dzieci promocje
Go to the top of the page
+Quote Post
Popek231
post 16.12.2014, 17:08:27
Post #5





Grupa: Zarejestrowani
Postów: 71
Pomógł: 2
Dołączył: 30.03.2012
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

Ponieważ piszę prostą internetową gierkębiggrin.gif

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


--------------------
Pomogłem? Wiesz co kliknąć w odpowiednim miejscu :)
Go to the top of the page
+Quote Post
maviozo
post 16.12.2014, 17:44:41
Post #6





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

Kod
onClick="$('#play').load('<?php echo $pages.$include; ?>items.php')">
Jest nieeleganckie smile.gif
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"));
});
Go to the top of the page
+Quote Post
Popek231
post 16.12.2014, 18:53:03
Post #7





Grupa: Zarejestrowani
Postów: 71
Pomógł: 2
Dołączył: 30.03.2012
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
maviozo
post 16.12.2014, 20:11:33
Post #8





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

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"));
Go to the top of the page
+Quote Post
Popek231
post 16.12.2014, 20:24:16
Post #9





Grupa: Zarejestrowani
Postów: 71
Pomógł: 2
Dołączył: 30.03.2012
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

na pasku adresu będzie JEDEN LINK, a ładowany będzie plik z DRUGI LINK (z data-link), tak?
Go to the top of the page
+Quote Post
maviozo
post 16.12.2014, 20:53:01
Post #10





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

Tak, o ile sobie to odpowiednio ogarniesz w reszcie skryptu, ale to nie powinno być trudne smile.gif
W tym wypadku, posługując się przykładami z w/w linków, musiałbyś jeszcze dodać (nie sprawdzałem, tylko tak "strzelam" smile.gif ):
Kod
history.replaceState(null, document.title, $(this).attr("href"));
Go to the top of the page
+Quote Post
Popek231
post 16.12.2014, 23:48:04
Post #11





Grupa: Zarejestrowani
Postów: 71
Pomógł: 2
Dołączył: 30.03.2012
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

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


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


--------------------
Pomogłem? Wiesz co kliknąć w odpowiednim miejscu :)
Go to the top of the page
+Quote Post
maviozo
post 17.12.2014, 00:18:39
Post #12





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

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 smile.gif nie pisałem tego, bo uznałem to za oczywistość. Nie wiem też którą wersję jquery podwieszasz, .on() nie było od zawsze.
Go to the top of the page
+Quote Post
Popek231
post 17.12.2014, 17:12:45
Post #13





Grupa: Zarejestrowani
Postów: 71
Pomógł: 2
Dołączył: 30.03.2012
Skąd: Bielsko-Biała

Ostrzeżenie: (0%)
-----

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

Dzięki, że pomogłeś, masz u mnie wielkieeeego + smile.gif


--------------------
Pomogłem? Wiesz co kliknąć w odpowiednim miejscu :)
Go to the top of the page
+Quote Post
maviozo
post 18.12.2014, 16:33:03
Post #14





Grupa: Zarejestrowani
Postów: 197
Pomógł: 24
Dołączył: 22.11.2010

Ostrzeżenie: (0%)
-----

Męczył mnie ten temat, a że znalazłem chwilę czasu to sprawdziłem doświadczalnie smile.gif
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 
  1. <html>
  2. <head>
  3. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  4. <script>
  5. $(function(){
  6. 	$(".test a").on('click',function(e){
  7. 	var link='/'+$(this).data("link");
  8. 	e.preventDefault();
  9. 	history.replaceState(null,null,link);
  10. 	$('#play').load($(this).attr("href"));
  11. 		});
  12.  
  13. 	});
  14. </script>
  15. </head>
  16.  
  17. <body>
  18. <div class="test">
  19. <a href="true1.html" data-link="false1.html">1</a>
  20. <a href="true2.html" data-link="false2.html">2</a>
  21. </div>
  22. <div id="play"></div>
  23. </body>
  24. </html>
[HTML] pobierz, plaintext
Być może że mi też to się w przyszłości przyda, więc dzięki za wątek smile.gif

Ten post edytował maviozo 18.12.2014, 16:39:11
Go to the top of the page
+Quote Post
shpaque
post 9.11.2018, 10:15:26
Post #15





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----

podepnę się tutaj - pytanko z ciekawosci:
jak zmienic tylko zawartosc paska url, np wyciac niepotrzebne rzeczy (tylko wizualnie)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2025 - 07:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn