Ł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:
Anonimowy użytkownik

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

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

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

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

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

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

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ę