jak wczytać automatycznie 5 podstron html ale nie z onClick'a do 5 osobnych divów na jednej stronie?
Robię coś takiego, ale nie działa, gdzie tkwi błąd?
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#tu_wczytuj_podstrona_1').load('stron1.html');
$('#tu_wczytuj_podstrona_2').load('stron2.html');
$('#tu_wczytuj_podstrona_3').load('stron3.html');
$('#tu_wczytuj_podstrona_4').load('stron4.html');
$('#tu_wczytuj_podstrona_5').load('stron5.html');
});
//]]>
</script>
<div id="tu_wczytuj_podstrona_1" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_2" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_3" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_4" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_5" style="width:100px; height:100px; display:block; float:left;"></div>
Pełna wersja: jak wczytać automatycznie 5 podstron html ale nie z onClick'a do 5 osobnych divów na jednej stronie?
Cześć, a co dokładnie nie działa? Ciężko mi się odnieść do problemu, bez prezentacji całego kodu, ale problem może leżeć w np. umiejscowieniu skryptu. Jeżeli odwołujesz się w skrypcie do elementów DOM, które jeszcze nie zostały wczytane, to skrypt nie zadziała! Jeżeli Twój skrypt znajduje się w sekcji <head></head>, to spróbuj przenieść go (dosłownie) przed znacznik </body> - możliwe, że to pomoże. Jeżeli zmiana położenia skryptu nie pomogły, to proszę Cię o przesłanie kodu. Pozdrawiam
btw < type='text/javascript' > <--- mime jest niepotrzebne, a to akurat jest niby przestarzałe. Według w3c "bardziej aktualne" jest application/javascript, ale możesz też wpisywać ("niby najbardziej aktualne"
) samo <script></script> --> HTML5
btw < type='text/javascript' > <--- mime jest niepotrzebne, a to akurat jest niby przestarzałe. Według w3c "bardziej aktualne" jest application/javascript, ale możesz też wpisywać ("niby najbardziej aktualne"
) samo <script></script> --> HTML5
Chyba za bardzo mieszasz jQuery ze standardowym JSem:
Czyli jak rozumiem, kod finalnie powinien wyglądać tak jak poniżej?
Bo coś mi nie działa.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#tu_wczytuj_podstrona_1').load('stron1.html');
$('#tu_wczytuj_podstrona_2').load('stron2.html');
$('#tu_wczytuj_podstrona_3').load('stron3.html');
$('#tu_wczytuj_podstrona_4').load('stron4.html');
$('#tu_wczytuj_podstrona_5').load('stron5.html');
});
//]]>
</script>
</head>
<body>
<div id="tu_wczytuj_podstrona_1" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_2" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_3" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_4" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_5" style="width:100px; height:100px; display:block; float:left;"></div>
</body>
</html>
Bo coś mi nie działa.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#tu_wczytuj_podstrona_1').load('stron1.html');
$('#tu_wczytuj_podstrona_2').load('stron2.html');
$('#tu_wczytuj_podstrona_3').load('stron3.html');
$('#tu_wczytuj_podstrona_4').load('stron4.html');
$('#tu_wczytuj_podstrona_5').load('stron5.html');
});
//]]>
</script>
</head>
<body>
<div id="tu_wczytuj_podstrona_1" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_2" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_3" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_4" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_5" style="width:100px; height:100px; display:block; float:left;"></div>
</body>
</html>
Cześć Marcus755!
Twój skrypt działa poprawnie, pod warunkiem, że uruchamiasz go na serwerze www. Zuplouduj sobie pliki na jakis serwer lub uruchom lokalnie serwer www, skopiuj pliki i sprawdz w przegladarce
.
Czyli z "parserem" kod działa poprawnie.
Jedyne co udało mi się sprawdzić to na iosie/linuxie nie potrzebny jest serwer, struktura i ścieżka katalogów, plików jest prawidłowo odczytywana, przez funkcje load. Niestety nie wiem, w jaki sposób funkcja load() pobiera adres, ale uruchamiając skrypt na windowsie to nie działa (podanie ścieżki absolutnej/relatywnej też nie działa). Na pozostałych systemach (ios/linux) wyświetla się prawidłowo. Nie potrafiłem odczytać z kodu w jak load() odczytuje adres. Jeżeli ktoś zna metodę w jaki sposób load() pobiera adres dokumentu, to bardzo proszę o komentarz.
Pozdrawiam
Twój skrypt działa poprawnie, pod warunkiem, że uruchamiasz go na serwerze www. Zuplouduj sobie pliki na jakis serwer lub uruchom lokalnie serwer www, skopiuj pliki i sprawdz w przegladarce
. Czyli z "parserem" kod działa poprawnie
.Jedyne co udało mi się sprawdzić to na iosie/linuxie nie potrzebny jest serwer, struktura i ścieżka katalogów, plików jest prawidłowo odczytywana, przez funkcje load. Niestety nie wiem, w jaki sposób funkcja load() pobiera adres, ale uruchamiając skrypt na windowsie to nie działa (podanie ścieżki absolutnej/relatywnej też nie działa). Na pozostałych systemach (ios/linux) wyświetla się prawidłowo. Nie potrafiłem odczytać z kodu w jak load() odczytuje adres. Jeżeli ktoś zna metodę w jaki sposób load() pobiera adres dokumentu, to bardzo proszę o komentarz.
Pozdrawiam
...ale coś wspominałeś, że można na samej js bez jquery, sprawdzałeś to może zadziała, jak zatrybi, to wrzuć skrypt js.
Poza tym, u mnie jak wrzuciłem lokalnie na serwer www, to wczytał mi stronkę, ale rozwaloną, tak jakby nie miała ostylowania, ani nie działały na niej żadne skrypty js, jquery, a odpalana ta stronka też lokalnie, ale z nie w div'ie, tylko bezpośredni po pisaniu url'a działa ze stylami i skryptami.
To jak to w końcu jest?
Poza tym, u mnie jak wrzuciłem lokalnie na serwer www, to wczytał mi stronkę, ale rozwaloną, tak jakby nie miała ostylowania, ani nie działały na niej żadne skrypty js, jquery, a odpalana ta stronka też lokalnie, ale z nie w div'ie, tylko bezpośredni po pisaniu url'a działa ze stylami i skryptami.
To jak to w końcu jest?
Hmm nie widzę, gdzie wspominałem o samym js , ale pewnością się da, nigdy takiego czegoś nie pisałem, ciężko mi z głowy podać przykład, ale jak będę miał chwilę to napiszę.
Strona uruchamiana bezpośrednio, nie w dive (tak jak to opisałeś) będzie działać i tu prawdopodobnie jest "błąd" ***.
Jeżeli chodzi o rozjeżdżanie ładowanych stron, to już zależy od CSS. Sprawdź np. dla statycznych wymiarów całego diva w którym ma być ładowany plik, a ładowany plik (np. stron1.html), powinien mieć wymiary relatywnie mniejsze w stosunku do diva, w którym będzie wyświetlany oraz ustaw np. overflow: hidden w stylu diva, w którym plik ma się załadować - dla pewności, żeby się nic nie rozjeżdżało. U mnie działa.
***Jeżeli chodzi o skrypty z zewnętrznych plików to również to działa. Tylko nie próbuj ładować plików *.html, które posiadają każdorazowo strukturę <html><heda> itd. ogranicz to do samych znaczników, bez sekcji <html> <head> <body>. U mnie działa.
Daj znać czy działa. Pozdrawiam
, ale pewnością się da, nigdy takiego czegoś nie pisałem, ciężko mi z głowy podać przykład, ale jak będę miał chwilę to napiszę.Strona uruchamiana bezpośrednio, nie w dive (tak jak to opisałeś) będzie działać i tu prawdopodobnie jest "błąd" ***.
Jeżeli chodzi o rozjeżdżanie ładowanych stron, to już zależy od CSS. Sprawdź np. dla statycznych wymiarów całego diva w którym ma być ładowany plik, a ładowany plik (np. stron1.html), powinien mieć wymiary relatywnie mniejsze w stosunku do diva, w którym będzie wyświetlany oraz ustaw np. overflow: hidden w stylu diva, w którym plik ma się załadować - dla pewności, żeby się nic nie rozjeżdżało. U mnie działa.
***Jeżeli chodzi o skrypty z zewnętrznych plików to również to działa. Tylko nie próbuj ładować plików *.html, które posiadają każdorazowo strukturę <html><heda> itd. ogranicz to do samych znaczników, bez sekcji <html> <head> <body>. U mnie działa.
Daj znać czy działa. Pozdrawiam
Cytat(mortus @ 15.12.2012, 22:48:39 ) 
Chyba za bardzo mieszasz jQuery ze standardowym JSem:
window.onload to nie to samo co $(document).ready, mógłbyś chociaż sprawdzić zanim zaczniesz takie głupoty pisać
window.onload wykonuje się po załadowaniu elementów na stronie, a $(document).ready() po wczytaniu źródła strony
Cześć. Skrypt działa prawidłowo na Windows 7 Professional poza serwerem www. Serwer potrzebny jest wtedy, gdy chcemy pobrać kontent generowany przez jakiś skryptowy język programowania, np. PHP. Jeśli chcemy załadować pliki HTML, to nie musimy mieć uruchomionego serwera www. Co dokładnie Ci nie działa? Może Twoje podstrony mają nazwy: strona1.html, strona2.html, itd., a tutaj używasz nazw stron1.html, stron2.html, itd.? Czy te pliki podstron znajdują się w tym samym katalogu, co plik główny?
PS: Taka mała uwaga, abyś używał prawidłowej składni HTML (łącznie z deklaracją doctype, brak doctype często powoduje problemy ze skryptami, stylami, a nawet samym HTML-em). Znaczików //<![CDATA i //]]> używamy w dokumentach XHTML, ale w dokumentach HTML już niekoniecznie.
@up: Za przeproszeniem, sam mógłbyś sprawdzić, skoro już podwarzasz czyjeś stwierdzenia. Cytat za dokumentacją jQuery:
Co oznacza, że ready() "określa" funkcję, która ma być uruchomiona po wczytaniu całego DOM. Czy window.onload nie jest uruchamiana właśnie w tym momencie? Odpowiem, jest.
No cóż, zdaje się, że chodzi nam o to samo, ale mało precyzyjnie się wyrażamy. window.onload jest wykonywane dopiero po wczytaniu pełnej zawartości strony, czyli zarówno DOM, jak i obiektów, obrazków, itp.. Natomiast .ready() jest uruchamiana już po wczytaniu DOM. Niemniej DOM to nie źródło strony, a ja nigdzie nie użyłem stwierdzenia, że window.onload() i $(document).ready() to to samo. Pierwsze jest alternatywą w czystym JS, dla tego drugiego w jQuery, choć oczywiście i w czystym JS można "stworzyć" ekwiwalent jQuery-owej metody .ready().
PS: Taka mała uwaga, abyś używał prawidłowej składni HTML (łącznie z deklaracją doctype, brak doctype często powoduje problemy ze skryptami, stylami, a nawet samym HTML-em). Znaczików //<![CDATA i //]]> używamy w dokumentach XHTML, ale w dokumentach HTML już niekoniecznie.
@up: Za przeproszeniem, sam mógłbyś sprawdzić, skoro już podwarzasz czyjeś stwierdzenia. Cytat za dokumentacją jQuery:
Cytat
.ready( handler ) Returns: jQuery
Description: Specify a function to execute when the DOM is fully loaded.
Description: Specify a function to execute when the DOM is fully loaded.
Co oznacza, że ready() "określa" funkcję, która ma być uruchomiona po wczytaniu całego DOM. Czy window.onload nie jest uruchamiana właśnie w tym momencie? Odpowiem, jest.
No cóż, zdaje się, że chodzi nam o to samo, ale mało precyzyjnie się wyrażamy. window.onload jest wykonywane dopiero po wczytaniu pełnej zawartości strony, czyli zarówno DOM, jak i obiektów, obrazków, itp.. Natomiast .ready() jest uruchamiana już po wczytaniu DOM. Niemniej DOM to nie źródło strony, a ja nigdzie nie użyłem stwierdzenia, że window.onload() i $(document).ready() to to samo. Pierwsze jest alternatywą w czystym JS, dla tego drugiego w jQuery, choć oczywiście i w czystym JS można "stworzyć" ekwiwalent jQuery-owej metody .ready().
Cytat(mortus @ 16.12.2012, 10:20:37 )
Serwer potrzebny jest wtedy, gdy chcemy pobrać kontent generowany przez jakiś skryptowy język programowania, np. PHP.
Tak, ale również chodzi o zasade działania funkcji fn.load w jquery - w jaki sposób tworzy ścieżkę pliku. Na windows 7 Professional tez działa u mnie bez serwera, ale tylko na -moz-, webkity np. wyswietlają mi pustą stronę.
Jeżeli chodzi o ładowanie plików zewnętrznych, sprawdź jak wyżej opisałem strukturę ładowanych plików html.
@up: To nie jest kwestia tego, w jaki sposób .load() tworzy ścieżki do pliku, a jedynie kwestia przeglądarki. webkity nie pozwalają na załadowanie w taki sposób podstron, jeśli nie mają ustawionego odpowiedniego nagłówka. Faktem jest, że serwer www, automatycznie te nagłównki dodaje, więc z poziomu serwera powinno to działać na każdej przeglądarce. Niemniej nie jest to kwestia samego jQuery, a właśnie przeglądarki.
Jednak nie jest to raczej pełna strona, która docelowo ma być puszczona w sieci, a jedynie jakiś tam banalny test. A skoro tak, to nic nie stoi na przeszkodzie, aby ten test przeprowadzić na FF. No i jak już wyżej pisałem, wszystko wygląda dobrze, a kod u mnie działa.
Jednak nie jest to raczej pełna strona, która docelowo ma być puszczona w sieci, a jedynie jakiś tam banalny test. A skoro tak, to nic nie stoi na przeszkodzie, aby ten test przeprowadzić na FF. No i jak już wyżej pisałem, wszystko wygląda dobrze, a kod u mnie działa.
ale po co mi skrypt, który będzie działał tylko na FF, zastanówcie się...
Ponawiam zapytanie, jak na bazie tego skryptu co napisałem, lub innego skryptu będę miał możliwość załadowania podstron po stronie przeglądarki do div'a, tak żeby działało to pod różnymi przeglądarkami i nie musi być w jquery może być w js?
Co do nagłówków, itp. robiłem i takie testy i nie działa...
Ponawiam zapytanie, jak na bazie tego skryptu co napisałem, lub innego skryptu będę miał możliwość załadowania podstron po stronie przeglądarki do div'a, tak żeby działało to pod różnymi przeglądarkami i nie musi być w jquery może być w js?
Co do nagłówków, itp. robiłem i takie testy i nie działa...
Cytat(mortus @ 16.12.2012, 10:20:37 )
@up: Za przeproszeniem, sam mógłbyś sprawdzić, skoro już podwarzasz czyjeś stwierdzenia. Cytat za dokumentacją jQuery:
Co oznacza, że ready() "określa" funkcję, która ma być uruchomiona po wczytaniu całego DOM. Czy window.onload nie jest uruchamiana właśnie w tym momencie? Odpowiem, jest.
Co oznacza, że ready() "określa" funkcję, która ma być uruchomiona po wczytaniu całego DOM. Czy window.onload nie jest uruchamiana właśnie w tym momencie? Odpowiem, jest.
Proszę: http://jsfiddle.net/TbVpR/1/
zauważ, że ready pojawia się od razu, a "window" i "loaded" równocześnie, po skończeniu wczytywania obrazka
Dodatkowo cytat z manuala js:
https://developer.mozilla.org/pl/docs/DOM/window.onload
Cytat
Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.
Istnieje także zdarzenie DOMContentLoaded (które można zarejestrować za pomocą addEventListener) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.
Istnieje także zdarzenie DOMContentLoaded (które można zarejestrować za pomocą addEventListener) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.
tak więc to chyba ja miałem rację
Cytat(Pawel_W @ 16.12.2012, 16:46:02 )
Proszę: http://jsfiddle.net/TbVpR/1/
zauważ, że ready pojawia się od razu, a "window" i "loaded" równocześnie, po skończeniu wczytywania obrazka
Dodatkowo cytat z manuala js:
https://developer.mozilla.org/pl/docs/DOM/window.onload
tak więc to chyba ja miałem rację
zauważ, że ready pojawia się od razu, a "window" i "loaded" równocześnie, po skończeniu wczytywania obrazka
Dodatkowo cytat z manuala js:
https://developer.mozilla.org/pl/docs/DOM/window.onload
tak więc to chyba ja miałem rację
No nie do końca, bo źródło strony to nie DOM, poza tym nie miałeś racji, bo nigdzie nie użyłem stwierdzenia, że jedno i drugie to to samo. Sam sobie to dopowiedziałeś szukając jakiejś sensacji albo chcąc się popisać.
EDIT: Niemniej swój cel osiągnąłeś, no i nie będę się sprzeczał, bo sam to sprawdziłem i jest jak mówisz.
Cytat(marcus755 @ 16.12.2012, 15:22:10 )
ale po co mi skrypt, który będzie działał tylko na FF, zastanówcie się...
nie rozumiem dygresji w zestawieniu z próbą pomocy.
Napisany przez Ciebie kod u mnie działa, możliwe przyczyny zostały również opisane wyżej (np. sekcje html head body w ładowanych plikach), jednak nie odniosłeś się do tego. Twój skrypt powinien banglać. Udostępnij kod html, np. stron1.html, wtedy będziemy mogli zreplikować problem na swoich maszynach inaczej z takim podejściem się nie da. Pozdrawiam
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.