PHP include dynamisch ändern, lädt aber Seite neu

Hallo,

Kurz mein „Problem“:
Ich möchte EINE (kleine) Seite bauen mit einer Animation oben. Im Menü soll man dann die Inhalte (unter der Animation) ändern können.

Nun „versuchte“ ich es „dynamisch“(?) mitPHP include einzubinden, aber die Seite lädt immer neu und damit geht die Animation nicht dort weiter, wo sie aufgehört hat :motz:

Menüknopf (link):
Start

Include:

<?php if($_GET['ac']=='start' || !$_GET['ac'])include 'home.php'; if($_GET['ac']=='buch')include 'buch.php'; ?>

Frage:
Gibt es hier eine Möglichkeit, das neu laden zu verhindern (es soll ja nur der Inhalt geändert werden, verstehe nicht, warum es neu ladet) oder zumindest die Animation zu speichern und dann weiterlaufen zu lassen, wo es endete?

Mir fällt nur ein iframe ein, das könnte ich machen, aber der passt sich nicht an die Länge vom Inhalt an, daher versuchte ich eben was neues zu lernen, aber es ist mehr ein Versuch, der gescheitert ist nach Stunden Suche im Internet (auch hier im Forum). Falls es eine Lösung gibt, bitte verständlich erklären mit Code-Beispielen posten.

Vielen Dank!

Eine Navigation ist ja meist nur um die 1kB groß, da macht es doch nichts, wenn die wieder
erneut zusammen mit dem Inhalt geladen wird.
Selbst wenn da statische Bilder drinstehen, hat das Darstellungsprogramm die sowieso meist
im Cache und läd sie nicht neu.
Von daher ist das schon die beste Lösung, die man mit (X)HTML+CSS hinbekommen kann.

Die andere Lösung, die von der Struktur her bedenklicher ist, ist ein frameset - zurecht wird
das heute nicht mehr gerne verwendet, bei hier nicht zulässigen chats etc aber eine gute
Lösung - oder auch beim Vergleich von zwei Texten.

Ansonsten braucht man ein anderes Format.
Da du ohnehin von Animation gesprochen hast, das geht mit SVG recht gut und deklarativ.
Mit SVG kann man auch Inhalte dynamisch und deklarativ wechseln.
Allerdings eignet sich das nicht besonders gut für längere Passagen Fließtext.

Wenn die Inhalte alle statisch verfügbar sind, kann man natürlich auch den gesamten Inhalt
in die Seite packen und nur den benötigten per CSS einblenden (Es gibt per CSS 3 eine
Pseudoklasse :target, mit welcher man Inhalte über einen im Menü ausgewählten
Fragmentidentifizierer selektieren kann - damit geht es, zumindest solange der Nutzer keinen
anderen Verweis auf der Seite betättigt ;o)
Je nach Menge an Inhalt hat man dann aber recht große Dokumente - also auch nicht
optimal und funktioniert auch nicht, wenn der Inhalt veränderlich ist oder sich an Aktionen
des Nutzers anpassen soll.

Natürlich kann man den Kram auch kombinieren - nachdem man eine Version hat, die einfach
so für alle funktioniert, könnte man natürlich noch eine Alternative mit AJAX anbieten für jene,
die Skriptinterpretation noch aktiviert haben - da kann man dann auch Inhalte dynamisch
austauschen. Das ohne statische, voll funktionsfähige Alternative zu versuchen, wäre allerdings
inkompetent, weil das einigen Nutzern den Inhalt unzugänglich machen würde.

Hi scacom, ich hab da ne Idee.

Wenn Javascript auf deiner Seite erlaubt ist, könntest du einen Ajax-Loader benutzen. (Das geht natürlich nur, wenn der User Javascript erlaubt hat, ansonsten ist das, was du da gecoded hast, schon ziemlich gut.)

Der Code:

function ajaxpage(url, containerid, loadgif){
document.getElementById(containerid).innerHTML = '<img src="'+loadgif+'" id="loadgif" />';
var bustcachevar=1
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
var page_request = false
if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ 
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar)
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){
if (file.indexOf(".js")!=-1){
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" "
}
}
}

PS: Hab ich nicht selbst geschrieben ich weiß nur nicht mehr von welcher Seite ich das hab :slight_smile:

Du könntest es dann so realisieren:
Zuerst bindest du das Script ein.
Dann hast du deinen Link im Menü - anstelle des href-Attributs benötigst du dann das onclick-Event, um den gleichen Effekt wie bei einem normalem Link zu erzeugen. Insgesamt würde ich das dann so aufbauen:

<div id="menu">
<a onclick="ajaxpage('deine_url.php', 'content', 'load.gif');">
<!-- Hier kommen alle weitere Links im gleichem Schema -->
</div>

<div id="content"><!-- Hier wird dann deine Seite reingeladen --></div>

deine_url ersetzt du durch eine Datei, welche die Daten beinhaltet, welche geladen werden sollen, d.h. für home benötigst du eine weitere Seite, z.B. ajaxpage_home.php, aus der dann alles included wird.
load.gif ersetzt du durch eine Animation, die gezeigt werden soll, wenn der Inhalt noch geladen wird.

Ich hoffe das ich das anschaulich gestaltet habe, aber falls du noch Fragen hast, stell sie einfach :wink:

LG Webfreak

Das Nachladen des kompletten Seiteninhalts per Javascript (Ajax) kann ich nicht empfehlen. Die Nachteile überwiegen die Vorteile. Der einzige Vorteil ist, wie hoffmann bereits angesprochen hat, dass man das wiederholte Nachladen der Navigation und ähnliche Seitenteile vermeiden kann. Da diese Teile allerdings meist nicht besonders groß sind lohnt es sich nicht dafür Ajax zu verwenden.
Nachteile: Bei einer solchen per Ajax generierten Seite, könnte man die einzelnen Seiten, die in der Navigation zu finden sind, nicht mehr direkt verlinken (diese Seiten haben dann keine eigene URL) und wie gesagt ist es dann auch für einige Besucher unerreichbar - Besucher mit deaktiviertem Javascript.

PHP ist dabei rein Serverseitig. Das was du vorhast klappt mit PHP so nicht. Dynamisch heißt hier, dass die Webseiten vom Server erst beim Seitenaufruf generiert werden (und nicht als fertige Seiten auf dem Webserver vorliegen). Eine nachträgliche Änderung der aufgerufenen Seite ist mit PHP nicht möglich.

mfg Balmung

[quote=“Balmung”][]
Nachteile: Bei einer solchen per Ajax generierten Seite, könnte man die einzelnen Seiten, die in der Navigation zu finden sind, nicht mehr direkt Verlinken (diese Seiten haben dann keine eigene URL) und wie gesagt ist es dann auch für einige Besucher unerreichbar - Besucher mit deaktiviertem Javascript.[][/quote]Ich hatte vor einigen Jahren je Ajax basierte Seite erstellt nicht nur weil die so deutlich schneller lud und einfach besser aussah, aber auch weil ich es interessant fand. Das is wirklich schon einige Jahre her und solche Seiten gesehen hatte man nicht wirklich [size=85](auch heute sind die eher gering)[/size]
Zu den Nachteilen… ich kann nur sagen meine Seite hatte damals keine :wink: Mit und ohne JS, es machte keinen Unterschied :stuck_out_tongue: [size=85](abgesehen davon das die Seite mit natürlich um Längen schneller war)[/size] Die links waren auch normale Links. Klickte man diese mit JS an, so wurde via Ajax geladen. Klickte man die hingegen ohne, oder mit mittel-klick etc. an, so wurde die Seite ohne Ajax geladen. [size=85](weitere links in dieser natürlich wieder mit)[/size]

Die Nachteile existieren einfach nicht wenn man es richtig anstellt. Außerdem muss man Seiten ohne JS Supporten weil zumindest die Search-engines sonst Probleme haben.
Und mit PHP is die Seite ohne JS auch kein Problem :stuck_out_tongue: Das Grundgerüst der Seite hat man eh, also nur noch den Content rein stopfen der sonst via Ajax angefragt worden wäre.

Moderne Browser untersützen das Nachladen problemlos, indem sie der Webseite erlauben, die angezeigte URL (nur den Pfad, nicht die Domain so weit ich weiß) zu ändern und in den Verlauf einzufügen.
diveintohtml5.info/history.html

jnavigate.com ist eine gelungene Implementierung von partiellem Neuladen denke ich.