Laden Sie den HTML-Seiteninhalt über AJAX

Ich baue gerade eine Website mit einer einzelnen Seitenvorlage, die den gesamten Inhalt über AJAX lädt. Wenn JavaScript jedoch nicht vorhanden ist, wird sie wieder auf eine normale Seitenladung reduziert.

Ich habe AJAX in der Vergangenheit durch WordPress geladen, also kenne mich dort aus. Allerdings habe ich noch nicht den Inhalt einer ganzen Seite geladen.

Was ich machen möchte, ist:

  1. Hijack klickt auf interne URLs und AJAX lädt den Inhalt ihrer URLs in ein Hauptinhaltsdiv.

  2. Ich werde die Kopf- / Fußzeilen / Seitenleisten in meinen Post- / Seitenvorlagendateien in eine function einbinden, um zu überprüfen, ob die Ladeanforderung von Ajax gemacht wurde. Wenn es war, wird es nicht in der Datei widerhallen.

Um dies zu tun, muss ich wissen, wie man den HTML-Inhalt einer URL in meine functions.php bekommt. Nach stundenlangem Suchen kann ich nichts finden, was mich dazu bringen könnte. All die Dinge, die ich damit zu tun habe, kleine Teile des Inhalts und nicht den gesamten Seiten-HTML-Code auszublenden.

Es wäre toll, wenn mir jemand in die richtige Richtung zeigen könnte!

Prost

Solutions Collecting From Web of "Laden Sie den HTML-Seiteninhalt über AJAX"

Eine AJAX-Anfrage ist eine Anfrage von einem Client wie jede andere Anfrage. Fragen Sie einfach die URL wie gewohnt, aber mit Javascript. Soweit sollte das einfach sein. Wenn Sie den zweiten Punkt erledigt haben – “Ich werde die Kopfzeile / Fußzeile / Seitenleisten umbrechen …” – korrekt sollte es kein Problem geben, außer dass seitenspezifische functionen nicht ausgeführt werden . Das wird das Problem sein, das Sie angehen müssen. Ich kann sehen, dass es in einer Reihe von Umständen ein Problem ist.

wp_head , Sie haben etwas mit wp_head , das nur ausgeführt wird und ausgeführt werden muss, wenn eine bestimmte wp_head . In Ihrem System funktioniert das nur, wenn die erste Seite für diese Vorlage geladen wird. Wenn Sie eine andere Seite laden und dann die Vorlage über AJAX laden, werden functionen, die an wp_head oder an irgendwelche bedingt ausgeführten Hooks angehängt sind, nicht ausgeführt.

Ihr AJAX-Callback muss eine Reihe von Hooks wp_headerwp_head , wp_footer , wp_footer … Ich bin mir sicher, dass es mehr gibt. Es könnte kompliziert werden.

Hast du die HTML5-Verlaufs-API ausprobiert?

http://html5doctor.com/history-api/

Soweit die AJAX, ich benutze nur die jQuery .load() -Methode, ziehen Sie in der URL, und wählen Sie eine ID zu bringen.

Sagen wir, Ihre Hauptseite hat HTML, das so aussieht:

  

Site Title

Load Ajax

Content of the section

Dann auf der Seite, die Sie mit AJAX laden, haben Sie den folgenden HTML: Code hier eingeben

  

Site Title

All of the content you want to load with AJAX

Wenn also Ihr gesamter Inhalt innerhalb des Elements “#container” auf der Seite liegt, die Sie mit ajax laden möchten, können Sie Folgendes tun:

 var hrefVariable = $(this).attr('href')+'#container'; jQuery('body').on('click', 'a.trigger', function(e){ // prevent link from doing it's thang e.preventDefault(); // load specific content from an element within a new url into current pages element (#ajaxBin) jQuery('#ajaxBin').load(hrefVariable, callbackFunction); }); 

Dadurch ersparen Sie sich das Erstellen zusätzlicher Vorlagen, da Sie Ihren HTML-Code einfach so anordnen können, dass Sie den gewünschten Inhalt abrufen können.

Dies ist ein gutes Tutorial zu dieser Methode.