Ładuj stronę HTML dynamicznie w div za pomocą jQuery
Staram się, aby po kliknięciu linku na stronie HTML dynamicznie ładował on żądaną stronę do elementu div z jQuery.
W jaki sposób mogę to zrobić?
<html>
<head>
<script type="text/javascript">
// what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content">[url="page1.html">Page 1[/url]
[url="page2.html">Page 2[/url]
[url="page3.html">Page 3[/url]
[url="page4.html">Page 4[/url]
[url="page5.html">Page 5[/url]
[url="page6.html">Page 6[/url]
</body>
</html>
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
7 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
pjax
https://github.com/defunkt/jquery-pjax
który mówi „to jest Ajax z prawdziwymi linkami permalinkami, nagłówkami stron i działającym przyciskiem Wstecz, który całkowicie degraduje”.
Wtyczka wykorzystuje HTML5 pushState i AJAX do dynamicznej zmiany stron bez pełnego ładowania. Jeśli pushState nie jest obsługiwany, PJAX wykonuje pełne ładowanie strony, zapewniając zgodność z poprzednimi wersjami.
Pjax nasłuchuje określonych elementów strony, takich jak . Następnie po wywołaniu elementu strona docelowa jest pobierana za pomocą Przykład:
Umieszczając ten kod w nagłówku strony, odsłuchujesz wszystkie łącza w dokumencie i ustawiasz element, który jednocześnie pobierasz z nowej strony i zastępujesz bieżącą.
(oznacza to, że chcesz zamienić na bieżącej stronie na ze strony zdalnej)
Wywołanie powoduje pobranie linku z nagłówkiem żądania i wyszukanie treść w wyniku. Jeśli wynik to , kontener na bieżącej stronie zostanie zastąpiony nowym wynikiem.
Jeśli nie jest pierwszym elementem znalezionym w odpowiedzi, PJAX nie rozpozna zawartości i wykona pełne załadowanie strony z żądanego linku. Aby to naprawić, kod zaplecza serwera musi być skonfigurowany tak, aby wysyłał tylko .
Przykładowy kod po stronie serwera :
Jeśli nie możesz zmienić kodu po stronie serwera, alternatywą jest wariant fragmentu.
Zauważ, że to starsze ustawienie pjax i wydaje się, że pobiera element podrzędny żądanego elementu.
Anonimowy użytkownik
Potwierdzenie od:
W tym przykładzie, jeśli umieścisz tag wokół treści oryginalnej strony, przechwyci on wszystko między tagami i niczego nie usunie. Zawijam moją oryginalną stronę I.
To rozwiązanie spowoduje przechwycenie wszystkiego pomiędzy powyższymi ogranicznikami. Wydaje mi się, że jest to znacznie solidniejsze rozwiązanie niż zwykłe obciążenie.
Anonimowy użytkownik
Potwierdzenie od:
i nie zapomnij najpierw zadzwonić do tej biblioteki:
Anonimowy użytkownik
Potwierdzenie od:
Nawiasem mówiąc, jeśli możesz uniknąć Jquery, możesz po prostu użyć atrybutu elementu :
Anonimowy użytkownik
Potwierdzenie od:
funkcja pobierania
http://api.jquery.com/load/
Jquery. Jeśli chcesz, możesz po prostu użyć tej funkcji z funkcją onclick dołączoną do tagu lub przycisku.
Anonimowy użytkownik
Potwierdzenie od:
Zobacz http://www.codeproject.com/art ... nto-a
http://www.codeproject.com/Art ... nto-a
Anonimowy użytkownik
Potwierdzenie od:
opcja
Wypróbuj z pewnymi modyfikacjami
Jeśli chcesz umieścić domyślną stronę umieszczoną w środku
id="divInnerVideo"
przykład: