wake-up-neo.com

Laden Sie die HTML-Seite dynamisch mit jQuery in div

Ich versuche es so zu machen, dass ich, wenn ich auf einen Link in einer HTML-Seite klicke, die angeforderte Seite dynamisch mit jQuery in ein div lädt.

Wie kann ich das machen?

<html>
<head>
<script type="text/javascript">
    // what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>

<a href="page1.html">Page 1</a><br />
<a href="page2.html">Page 2</a><br />
<a href="page3.html">Page 3</a><br />
<a href="page4.html">Page 4</a><br />
<a href="page5.html">Page 5</a><br />
<a href="page6.html">Page 6</a><br />
</body>
</html> 
15
Saeed

Es gibt ein jQuery-Plugin namens pjax es besagt: "Es ist Ajax mit echten Permalinks, Seitentiteln und einem Zurück-Zurück-Button, der sich vollständig verschlechtert."

Das Plug-In verwendet HTML5-PushState und AJAX, um Seiten dynamisch zu ändern, ohne dabei vollständig geladen zu sein. Wenn pushState nicht unterstützt wird, führt PJAX eine vollständige Seitenladung durch, um die Abwärtskompatibilität sicherzustellen.

Was pjax tut, ist, dass es bestimmte Seitenelemente wie <a> abhört. Wenn dann das <a href=""></a>-Element aufgerufen wird, wird die Zielseite entweder mit dem X-PJAX-Header oder einem angegebenen Fragment abgerufen.

Beispiel:

<script type="text/javascript">
  $(document).pjax('a', '#pjax-container');
</script>

Wenn Sie diesen Code in den Seitenkopf einfügen, werden alle Links im Dokument überwacht und das Element festgelegt, das Sie von der neuen Seite abrufen und auf der aktuellen Seite ersetzen.

(was bedeutet, dass Sie #pjax-container auf der aktuellen Seite durch #pjax-container von der Remote-Seite ersetzen möchten)

Wenn <a> aufgerufen wird, wird der Link mit dem Anforderungsheader X-PJAX abgerufen und im Ergebnis nach dem Inhalt von #pjax-container gesucht. Wenn das Ergebnis #pjax-container ist, wird der Container auf der aktuellen Seite durch das neue Ergebnis ersetzt.

<!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>
  <h1>My Site</h1>
  <div class="container" id="pjax-container">
    Go to <a href="/page2">next page</a>.
  </div>
</body>
</html>

Wenn #pjax-container nicht das erste Element in der Antwort ist, erkennt PJAX den Inhalt nicht und führt für den angeforderten Link kein vollständiges Laden der Seite aus. Um dies zu beheben, muss der Server-Backend-Code so eingestellt werden, dass nur #pjax-container gesendet wird.

Beispiel-serverseitiger Code von page2:

//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
  Go to <a href="/page1">next page</a>.
</div>
//else send full page

Wenn Sie serverseitigen Code nicht ändern können, ist die Option fragment eine Alternative.

$(document).pjax('a', '#pjax-container', { 
  fragment: '#pjax-container' 
});

Beachten Sie, dass fragment eine ältere pjax-Option ist und das untergeordnete Element des angeforderten Elements abzurufen scheint.

14
hexacyanide

Das Laden von JQuery funktioniert, aber es werden Javascript und andere Elemente von der Quellseite entfernt. Dies ist sinnvoll, da Sie möglicherweise kein schlechtes Skript auf Ihrer Seite einfügen möchten. Ich denke, das ist eine Einschränkung und da Sie eine ganze Seite und nicht nur ein div auf der Quellenseite machen, möchten Sie sie möglicherweise nicht verwenden. (Ich bin nicht sicher über Css, aber ich denke, es würde auch ausgezogen werden)

Wenn Sie in diesem Beispiel ein Tag um den Hauptteil Ihrer Quellseite setzen, greift es alles zwischen den Tags und zieht nichts aus. Ich wickle meine Quellenseite mit und ein.

Bei dieser Lösung wird alles zwischen den obigen Trennzeichen erfasst. Ich finde, es ist eine viel robustere Lösung als eine einfache Last.

  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);
    });
6
user957863

Ich denke, das würde es tun:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

         $(".divlink").click(function(){
         $("#content").attr("src" , $(this).attr("ref"));

});

});
</script>
</head>
<body>
<iframe id="content"></iframe>

<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>

Wenn Sie Jquery vermeiden können, können Sie übrigens das target-Attribut des <a>-Elements verwenden:

<html>
<body>
<iframe id="content" name="content"></iframe>

<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html> 
5

Versuchen Sie es mit diesem:

$(document).ready(function(){
  $('a').click(function(e){
     e.preventDefault();
     $("#content").load($(this).attr('href'));
  });
});

und stellen Sie sicher, dass Sie zuerst diese Bibliothek aufrufen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
5
Jai

Ich denke, Sie suchen nach der Funktion Jquery Load . Sie würden diese Funktion nur mit einer Onclick-Funktion verwenden, die an ein Tag oder eine Schaltfläche gebunden ist, wenn Sie möchten.

3
nathan hayfield

Sie können jQuery's getJSON () oder Load () verwenden. Mit letzterer können Sie auf eine vorhandene HTML-Datei verweisen. Weitere Informationen finden Sie unter http://www.codeproject.com/Articles/661782/Drei-Wege-auf-Dynamisch-Load-HTML-Content-into-a -

1
B. Clay Shannon

Sie können durch Option

Versuchen Sie dies mit einigen Modifikationen 

<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="https://www.youtube.com/embed/'+ 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">
</div>

Wenn Sie eine Standardseite in id = "divInnerVideo" platzieren möchten

beispiel:

<div id="divInnerVideo">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
1
sn ps