Ł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>

Zaproszony:

7 odpowiedzi

Anonimowy użytkownik

Potwierdzenie od:

Istnieje wtyczka jQuery o nazwie

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

& < a & >

. Następnie po wywołaniu elementu

& < a href = "" & > & </a & >

strona docelowa jest pobierana za pomocą

X-PJAX  nagłówek lub określony fragment.

Przykład:

<script type="text/javascript">

 $(document).pjax('a', '#pjax-container');

</script>

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ć

# pjax-container

na bieżącej stronie na

# pjax-container

ze strony zdalnej)
Wywołanie

& < a & >

powoduje pobranie linku z nagłówkiem żądania

X-PJAX

i wyszukanie

# pjax-container

treść w wyniku. Jeśli wynik to

# pjax-container

, kontener na bieżącej stronie zostanie zastąpiony nowym wynikiem.

<!DOCTYPE html>

<html>

<head>

 <script type="text/javascript" src="jquery.min.js"></script>

 <script type="text/javascript" src="jquery.pjax.js"></script> 

 <script type="text/javascript">

 $(document).pjax('a', '#pjax-container');

 </script> 

</head>

<body>

 [b]My Site[/b]>

 <div class="container" id="pjax-container">

 Go to [url="/page2">next page[/url].

 

</body>

</html>

Jeśli

# pjax-container

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

# pjax-container

.
Przykładowy kod po stronie serwera

page2

//if header X-PJAX == true in request headers, send

<div class="container" id="pjax-container">

 Go to [url="/page1">next page[/url].//else send full page

Jeśli nie możesz zmienić kodu po stronie serwera, alternatywą jest wariant fragmentu.

$(document).pjax('a', '#pjax-container', { 

 fragment: '#pjax-container' 

});

Zauważ, że

fragment

to starsze ustawienie pjax i wydaje się, że pobiera element podrzędny żądanego elementu.

Anonimowy użytkownik

Potwierdzenie od:

Ładowanie JQuery działa, ale usunie javascript i inne elementy z oryginalnej strony. Ma to sens, ponieważ możesz nie chcieć wstawić złego skryptu na swoją stronę. Myślę, że jest to ograniczenie, a ponieważ tworzysz całą stronę, a nie tylko element div na oryginalnej stronie, możesz nie chcieć go używać. (Nie jestem pewien co do css, ale myślę, że też się rozłączy)
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.

var content = $('.contentDiv');

 content.load(urlAddress, function (response, status, xhr) {

 var fullPageTextAsString = response;

 var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart/>"), fullPageTextAsString.indexOf("<jqueryloadmarkerend/>"));

 content.html(pageTextBetweenDelimiters);

 });

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj z tym:

$(document).ready(function(){

 $('a').click(function(e){

 e.preventDefault();

 $("#content").load($(this).attr('href'));

 });

});

i nie zapomnij najpierw zadzwonić do tej biblioteki:

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">]https://ajax.googleapis.com/aj ... gt%3B[/url]

</script>

Anonimowy użytkownik

Potwierdzenie od:

Myślę, że to wystarczy:

<html>

<head>

<script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]

<script type="text/javascript">

 $(document).ready(function(){ $(".divlink").click(function(){

 $("#content").attr("src" , $(this).attr("ref"));});});

</script>

</head>

<body>

<iframe id="content"></iframe>[url="#" ref="page1.html" class="divlink" >Page 1[/url]

[url="#" ref="page2.html" class="divlink" >Page 2[/url]

[url="#" ref="page3.html" class="divlink" >Page 3[/url]

[url="#" ref="page4.html" class="divlink" >Page 4[/url]

[url="#" ref="page5.html" class="divlink" >Page 5[/url]

[url="#" ref="page6.html" class="divlink" >Page 6[/url]

</body>

</html>

Nawiasem mówiąc, jeśli możesz uniknąć Jquery, możesz po prostu użyć atrybutu

target

elementu

& < a & >

<html>

<body>

<iframe id="content" name="content"></iframe>[url="page1.html" target="content" >Page 1[/url]

[url="page2.html" target="content" >Page 2[/url]

[url="page3.html" target="content" >Page 3[/url]

[url="page4.html" target="content" >Page 4[/url]

[url="page5.html" target="content" >Page 5[/url]

[url="page6.html" target="content" >Page 6[/url]

</body>

</html>

Anonimowy użytkownik

Potwierdzenie od:

Myślę, czego szukasz

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:

Możesz użyć jQuery getJSON () lub Load (); za pomocą tego ostatniego możesz utworzyć link do istniejącego pliku html. Więcej informacji znajdziesz w

Zobacz http://www.codeproject.com/art ... nto-a
http://www.codeproject.com/Art ... nto-a

Anonimowy użytkownik

Potwierdzenie od:

Możesz przejść

opcja

Wypróbuj z pewnymi modyfikacjami

<div trbidi="on">

<script type="text/javascript">

function MostrarVideo(idYouTube)

{

var contenedor = document.getElementById('divInnerVideo');

if(idYouTube == '')

{contenedor.innerHTML = '';

} else{

var url = idYouTube;

contenedor.innerHTML = '<iframe width="560" height="315" src="[url=https://www.youtube.com/embed]https://www.youtube.com/embed[/url]/'+ url +'" frameborder="0" allowfullscreen></iframe>';

}

}

</script>

<select onchange="MostrarVideo(this.value);">

<option selected disabled>please selected </option>

<option value="qycqF1CWcXg">test1</option>

<option value="hniPHaBgvWk">test2</option>

<option value="bOQA33VNo7w">test3</option>

</select>

<div id="divInnerVideo">

Jeśli chcesz umieścić domyślną stronę umieszczoną w środku

id="divInnerVideo"

przykład:

<div id="divInnerVideo">

<iframe width="560" height="315" src="[url=https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&showinfo=0"]https://www.youtube-nocookie.c ... ot%3B[/url] frameborder="0" allowfullscreen></iframe>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

Ładuj stronę HTML dynamicznie w div za pomocą jQuery

7 odpowiedzi

Powiązane pytanie

Stan problemu

Ładuj stronę HTML dynamicznie w div za pomocą jQuery

Linki dotyczące treści

7 odpowiedzi

Powiązane pytanie

Stan problemu