Züruck- und Vor-Buttons bei Browsern, wenn man mit AJAX die div's neulädt

X

X-Man

Grünschnabel
Ich habe folgendes Problem;
ich habe eine Webseite, die aus fünf Leisten, also Blöcken besteht (Kopf, Linke, Mittlere, Rechte und Fuss).

Wenn man in linker Leiste auf einen Button drückt eine Html-Seite zu öffnen, wird mit AJAX entsprechende Seite in mittlerer Leiste(Block) geladen OHNE die ganze Seite neu zu laden. Deswegen kann man ja die Zurück- und Vor-Buttons von dem Browser nicht verwenden (Das ist ja auch ein Nachteil von AJAX), da der Browser die ganze Seite nicht ganz neu lädt, sondern per AJAX bei DOM-Baum von Browser nur der Zweig(div-Tag) für mittleres Block, also der Inhalt des div-Tags mit dem neuen div-Tag der aufgerufenen (neue) HTML-Seite ersetzt .

Was muss man machen oder wie kann man den Browser dazu zwingen, dass er die Änderungen merkt und damit der Benutzer zu einem späteren Zeitpunkt zurück zu einer der vorigen Seiten kommen kann, wie bei normalen Neuladen?

Ich weiss nicht ob ich mich gut ausdrücken könnte?! :confused:

Gibt's auch irgendein Code dafür?
 
ich würde die aktuelle Seite des Blocks in der SESSION speichern und beim einem neuen laden der Seite die Blöcke so wieder herstellen.


Gruß Napofis
 
Moin,

das Geheimnis heisst "Anker".

Wenn man in einer Seite zu einem Anker springt, wird das in der History gespeichert.

Also angenommen folgender Ablauf:
du führst einen Request per AJAX aus. Ist er beendet, änderst du den Anker in der URL(location.hash) zu einem eindeutigem Wert, an dem man erkennen kann, was dort per AJAX wohin geladen wurde.

Wird die Seite nun nochmal später per History oder Bookmark aufgerufen, kannst du per AJAX beim onload den passenden Inhalt dazuladen, den benötigten Inhalt erkennst du wiederum an dem Anler in der URL.
 
Hallo mit einander und danke Euch für die schnellen Antworten.

Der Vorschlag mit Session ist gut, ich glaube aber die Lösung mit "Anker" klingt besser.

Und obwohl ich teilweise verstehe wie man vorgehen kann, habe ich mich mit dem Thema nicht so richtig beschäftigt. Gibt's vieleicht Referenz darüber wo man nachschlagen kann wie man vorgeht, also ich meine mit Anker und Hash?

Gruss
 
Könnt ihr mir sagen wie und wo sollte ich eigentlich den # hinzufügen?

Hier sind Teile von meiner Seite und alles funktioniert primar und natürlich kann man sich mit Zurück- und Vor-Button nicht hin und her bewegen.

Und wo sollte ich den ersetzten Inhalt speichern, etwa in Cookie?

page_request.js:
Code: 
var bustcachevar=1
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
 
function ajaxpage(url, containerid){
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;
}
}

index.php:
HTML: 
<html>
<head>
..
<script type="text/javascript" src="javascripts/page_request.js"> </script>
..
</head>
<body>
..
 
/*Menue als Tabelle mit Links*/
<table class="navigation_inhalt">
   ....
   <tr><td class="menue"><a href="javascript:ajaxpage('seite3.php', 'ladebreich');">Lade die Seite 3 in mitlerem Block im "ladebereich"</a></td></tr>
   <tr><td class="menue"><a href="javascript:ajaxpage('seite4.php', 'ladebreich');">Lade die Seite 4 in mitlerem Block im "ladebereich"</a></td></tr>
</table>
...
 
<div id="mitte">
     <div id="ladebreich"> </div>
</div>
 
..
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück