Advitum.de auf Google+

Ajax-OnePage – Inhalt richtig per Ajax nachladen

Ajax-OnePage – Inhalt richtig per Ajax nachladen
VN:F [1.9.22_1171]
Bewertung: 3.5/5 (60 Stimmen abgegeben)
Von am
Kategorien: JavaScript, jQuery, PHP, Programmieren, Tutorials

Immer wieder stolpere ich im Netz über Ajax-OnePages, also Seiten, bei denen, sobald man auf einen internen Link klickt, der gewünschte Inhalt per Ajax nachgeladen wird. Dadurch werden oft interessante Animationen, wie zum Beispiel Diashow-Übergänge oder Ähnliches möglich. Leider führt das Nachladen von Inhalten per Ajax, wenn man es nicht richtig macht, zu einer riesigen Katastrophe: keine Suchmaschine indiziert den nachgeladenen Inhalt und ohne JavaScript wird die Seite gänzlich unbrauchbar für den Nutzer.

In diesem Artikel will ich deshalb zeigen, wie man eine Ajax-OnePage richtig umsetzt und die zahlreichen Stolpersteine umgeht.

Der Schlüssel zum Erfolg liegt im Progressive Enhancement. Ohne JavaScript und Ajax funktioniert die Seite ganz normal, erst mit dem JavaScript kommen Animationen und OnePage-Charakteristika hinzu. So ist die Seite für jeden nutzbar und auch Suchmaschinen können den gesamten Inhalt indizieren.

Ajax-OnePage - Inhalt richtig per Ajax nachladen, 3.5 out of 5 based on 60 ratings

Schritt 1: Vorbereitung – die Inhalte

Zunächst müssen wir jedoch ein paar Grundlagen schaffen. Zum Beispiel müssen wir jQuery herunterladen und eine HTML-Struktur erstellen. Mein Beispieldesign ist sehr — nun ja — brachial, aber ich will ja auch nur ein Konzept demonstrieren. Deshalb komme ich auch komplett ohne CSS aus.

Als erstes brauchen wir zwei Ordner js und pages. Im JS-Ordner liegt nur die Datei main.js, diese ist jedoch leer. In dem Ordner pages sollen später die Inhalte der Seite liegen. Für jede Unterseite sollte es hier eine Datei geben.

Ich lege hier erst einmal nur drei Dateien, also drei Unterseiten an.

<h1>Kontaktieren</h1>

Hier könnte dein Kontakt-Formular stehen ;)
<h1>Impressum</h1>

Im Impressum stehen wichtige Daten, normalerweise jedenfalls&hellip;

<h1>Hereinspaziert!</h1>

Dies ist die Startseite - mehr Text brauchen wir nicht!

Im Ernstfall würde man natürlich mehr Dateien und auch viel mehr Inhalt abspeichern, aber für meine kurze Demonstration sollen diese kurzen Texte genügen.

Schritt 2: Inhalte anzeigen

Nun müssen wir noch eine Datei index.php im Hauptordner anlegen. Hier findet sich später der HTML-Code, der auf allen Seiten gleich ist.

<?php
	
	$titles = array(
		'index' => 'Startseite',
		'contact' => 'Kontakt',
		'impressum' => 'Impressum'
	);
	
	$page = 'index';
	
	echo '<?xml version="1.0" encoding="UTF-8" ?>'; 
?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title><?php echo $titles[$page]; ?> - Ajax-OnePage</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>
	<header>
		Hier könnte ein Header stehen...
	</header>
	<nav>
		<ul>
			<?php
				foreach($titles as $key => $title) {
					echo '
			<li>
				<a href="' . $key . '.php" class="onPage">' . $title . '</a>
			</li>';
				}
			?>
		</ul>
	</nav>
	<div id="swapper"><?php include('pages/' . $page . '.page.php'); ?></div>
	<footer>
		Hallo, ich bin der Footer. Ich bleibe immer hier, egal wie du durch die Seite navigierst...
	</footer>
</body>

</html>

Hier definieren wir zuerst ein Array mit allen erlaubten Unterseiten, bestehend aus dem Dateinahmen (ohne Endung) und dem Seitentitel. Vorerst setzen wir die Variable $page auf index, also unsere Startseite. Anschließend folgt der HTML-Code. Hier wird automatisch der richtige Seitentitel und Inhalt eingefügt. Der Seitentitel wird aus dem Array genommen, der Inhalt wird aus der entsprechenden Datei im Ordner pages inkludiert. Als nächstes sorgen wir dafür, dass der Aufruf der Seiten contact.php und impressum.php auch auf index.php führt.

Schritt 3: Alle Aufrufe umleiten

Dazu legen wir die Datei .htaccess im Stammverzeichnis an. Hier können wir nun definieren, dass alle Aufrufe an die Webseite an index.php weitergeleitet werden.

<IfModule mod_rewrite.c>

# Enable URL rewriting
RewriteEngine On

#RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l

# Main URL rewriting.
RewriteRule .* index.php [L]

</IfModule>

Nun müssen wir in der Datei index.php noch dafür sorgen, dass auch die richtige Unterseite geladen wird. Statt die Variable $page manuell zu setzen, nutzen wir nun folgenden Code, um die gewünschte Unterseite auszuwählen.

$urlParts = array();
preg_match('/\/([a-z]+)\.php(\?.*)?$/', $_SERVER["REQUEST_URI"], $urlParts);

if(isset($urlParts[1]) && isset($titles[$urlParts[1]])) {
	$page = $urlParts[1];
} else {
	$page = 'index';
}

Was passiert hier? Zunächst wird mithilfe eines Regulären Ausdrucks die aufgerufene Url auseinandergenommen. Danach finden wir in $urlParts[1] den entsprechenden Dateinamen (wieder ohne Erweiterung).

Jetzt wird automatisch, wenn wir eine URL aufrufen, der entsprechende Inhalt aus dem Ordner pages geladen. Unsere Seite funktioniert also, und so wie sie ist, können Suchmaschinen auch sämtlichen Inhalt indizieren. Jede Seite hat eine eigene, gültige URL.

Schritt 4: Progressive Enhancement mit JavaScript

Nun geht es daran, aus unserer Seite mit ein wenig JavaScript eine OnePage-Seite zu zaubern.

Deshalb fügen wir zuerst folgenden Code in den Kopf des HTML-Codes in der Datei index.php ein.

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	/* <![CDATA[ */
		var titles = <?php echo json_encode($titles); ?>;
	/* ]> */
</script>
<script type="text/javascript" src="js/main.js"></script>

Wir laden also jQuery, übertragen unsere Seitentitel aus dem PHP-Code in eine JavaScript-Variable und laden unsere eigene JavaScript-Datei main.js. Diese Datei bearbeiten wir als nächstes.

function bindLinks(links) {
	links.click(function() {
		var href = $(this).attr('href');
		var page = href.substr(0, href.indexOf('.'));
		
		if(page == '') {
		    page = 'index';
		}
		
		changePage(page);
		
		return false;
	});
}

function changePage(page) {
	$.ajax('pages/' + page + '.page.php', {
		success: function(data) {
			$('title').text(titles[page] + ' - Ajax-OnePage');
			$('#swapper').html(data);
			bindLinks($('#swapper a.onPage'));
		}
	});
}

$(document).ready(function() {
	bindLinks($('a.onPage'));
});

Wir definieren zuerst eine Funktion bindLinks, die an Links den onClick-Event-Handler anfügt. In diesem Handler lesen wir aus dem Href-Attribut des Links die Zielseite aus und übergeben diese an die Funktion changePage. Hier starten wir einen Ajax-Request an die entsprechende Datei im Ordner pages. Sobald die Antwort vom Server kommt, ändern wir Titel und Inhalt der aktuellen Seite. Zusätzlich rufen wir noch einmal die Funktion bindLinks auf, falls im Inhalt der neuen Seite auch Links auftauchen.

Der Zaubertrick funktioniert perfekt: der Inhalt und der Titel der Seite werden ausgetauscht und der Nutzer muss die Seite nicht neu laden. Die Ajax-OnePage ist fertig.

Naja, leider noch nicht ganz, denn eine Kleinigkeit fällt noch auf: die URL wird nicht geändert. Hier bleibt alles beim Alten. Das zerstört nicht nur die Illusion, es raubt dem Nutzer außerdem die Zurück- und Refresh-Buttons des Browsers. Denn laden wir die Seite neu, landen wir wieder auf der ersten Seite, die wir aufgerufen haben. Der Zurück-Button bleibt sogar ganz ohne Funktionalität.

Schritt 5: Manipulation der Browser-History

Um dieses Problem zu lösen, verändern wir unser JavaScript noch ein wenig und nutzen die HTML5-History-API. Mit dieser können wir dem Browser-Verlauf einfach neue Einträge hinzufügen.

function bindLinks(links) {
	links.click(function() {
		var href = $(this).attr('href');
		var page = href.substr(0, href.indexOf('.'));
		
		changePage(page, true);
		
		return false;
	});
}

function changePage(page, forward) {
	$.ajax('pages/' + page + '.page.php', {
		success: function(data) {
			$('title').text(titles[page] + ' - Ajax-OnePage');
			$('#swapper').html(data);
			bindLinks($('#swapper a.onPage'));
			
			if(forward) {
				history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost/kleines/ajax-onepage/' + page + '.php');
			}
		}
	});
}

$(document).ready(function() {
	bindLinks($('a.onPage'));
	
	$(window).bind('popstate', function(event) {
		var rawFileName = window.location.href.match(/\/([a-z]+)\.php(\?.*)?$/);
		
		changePage(rawFileName[1], false);
	});
});

Wir müssen einfach dem Browser-Verlauf jedes Mal eine neue Seite hinzufügen, wenn wir die Seite wechseln, indem wir auf einen Link klicken.

Der neue Parameter von changePage definiert hier, ob wir uns normal durch die Seite bewegen (true) oder den Zurück-Button des Browsers nutzen (false). Denn wenn wir den Zurück-Button des Browsers klicken, darf natürlich die Seite nicht als neue Seite eingetragen werden, denn sie ist ja nicht neu.

Wenn wir uns also normal durch die Seite bewegen, wird mit history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost/kleines/ajax-onepage/' + page + '.php'); ein neuer Eintrag in der History gespeichert. Der zweite Parameter definiert hierbei den Seitentitel und der dritte Parameter die URL der neuen Seite.

Mit $(window).bind('popstate' .... reagieren wir auf das betätigen des Zurück-Buttons. Denn dann muss die vorherige Seite geladen werden.

Fazit: Perfekte Illusion

Nun ist der Zauber wirklich perfekt, die Seite kann jetzt mit und ohne JavaScript durch die Seite navigieren und selbst Suchmaschinen finden den gesamten Inhalt. Trotzdem kommt die gesamte Seite im Idealfall aus, ohne auch nur ein einziges Mal die Seite neu zu laden. So macht man Ajax-OnePages richtig!

Und was sagst du?

Wie findest du die verwendete Technik? Ist alles klar geworden? Gib mir in den Kommentaren ein Feedback!

Ajax-OnePage - Inhalt richtig per Ajax nachladen, 3.5 out of 5 based on 60 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Mathias schrieb am Antworten

Hallo,

super Tutorial, nur scheint es bei mir nicht zu funktionieren, sobald ich die htaccess-datei auf dem server hab. Woran kann das liegen. Habe alles so gemacht wie du. Wenn ich die htaccess-datei weglasse zeigt er zumindest nen hintergrund an, aber sonst garnichts.

Manuel schrieb am Antworten

Hallo,
klasse Tutorial, nur ein kleiner Fehler hat sich eingeschlichen: Bei Schritt fünf muss die Zeilehistory.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost/kleines/ajax-onepage/' + page + '.php'); durch history.pushState('', titles[page] + ' - Ajax-OnePage', page + '.php'); ersetzt werden, damit es für jede URL funktioniert.

Aber sonst einwandfrei, funktioniert auch mit abgeschaltetem Javascript durch das PHP ohne Probeme! Danke!!!

Dominik schrieb am Antworten

Habe das Tutorial probiert und läuft super aufm Rechner.
Aber live hab auch ich Probleme mit der .htacess
die Zeile mit
#RewriteBase /
darf live nicht auskommentiert sein, sonst bekomm ich die 500er Fehlermeldung.
RewriteBase aktiviert -> ganze Seite wird geladen und nicht nur der Content vom Swapper.

    Lars Ebert schrieb am Antworten

    Ich habe die Erfahrung gemacht, dass die RewriteEngine auf manchen Servern ohne eine Angabe von RewriteBase auskommt, auf manchen nicht. Deshalb kommentiere ich sie immer aus und füge sie erst ein, wenn es zu Problemen kommt. So spare ich mir im Einzelfall das Anpassen des Pfades. Sollte es Probleme geben, ergänzt einfach die RewriteBase!

    Danke für den Hinweis!

Johannes schrieb am Antworten

Hi Lars, das Tutorial ist echt klasse. Bei einer Sache komme ich aber nicht weiter.
Starte ich die Seite ohne eine Datei direkt aufzurufen, wird intern die index.php geladen, in der Adresszeile jedoch nur die Domain angezeigt: „www.domain.com“.
Ich lade dann eine Unterseite „www.domain.com/unterseite.php“, alles funktioniert wie gewünscht. Gehe ich dann über die Browser-History zurück, wird die Adresszeile korrekt geändert auf „www.domain.com“, aber der Inhalt der Unterseite bleibt komischerweise geladen. Wo liegt der Fehler?
Danke und Gruß

    Lars Ebert schrieb am Antworten

    Hallo Johannes,

    ich würde das Problem hier suchen:

    	$(window).bind('popstate', function(event) {
    		var rawFileName = window.location.href.match(/\/([a-z]+)\.php(\?.*)?$/);
    		
    		changePage(rawFileName[1], false);
    	});

    Wenn hier nicht am Ende index.php steht, sondern nur /, müssten wir das mit JavaScript noch abfangen. Sprich, wenn match() zu keinem Ergebnis kommt, muss das Ergebnis einfach „index“ sein.

    Damit sollte es hoffentlich funktionieren. Danke für dein Feedback!

      Johannes schrieb am Antworten

      Hallo Lars,

      du hast Recht! Die Variable rawFileName ist in diesem Fall null und man übergibt einfach „index“ als Parameter. Es scheint zu funktionieren. 🙂
      Thx

        Lars Ebert schrieb am Antworten

        Danke noch einmal für den Hinweis, ich habe es jetzt auch endlich im Artikel behoben!

Nanny McPhee schrieb am Antworten

funktioniert nicht im IE8…
super support, erster kommentar am 10. oktober 2012 -> null reaktion deinerseits…
letzter kommentar am 5. februar 2013 -> antwort deinerseits am 23. april, das sind 11 wochen!!!
fazit: &#%#@

    Lars Ebert schrieb am Antworten

    Hallo auch!

    Es tut mit leid, dass hier alle so lange auf eine Antwort warten mussten. Aber wie du in meinem Artikel Huch — oder: wo ist die Zeit hin? nachlesen kannst, war ich in den letzten Monaten sehr beschäftigt und habe diesen Blog viel zu lange vernachlässigt. Jetzt geht es aber wieder los! Das heißt auch, dass es in Zukunft endlich Antworten auf die meisten Kommentare geben wird. Allerdings muss ich erst noch tausende Spam-Kommentare filtern.

    Nun zu deiner eigentlichen Frage: Im IE8 funktioniert es nicht? Warum nicht, bei mir läuft es im IE8! Tritt bei dir irgendein JavaScript-Fehler auf? Was genau funktioniert nicht? Was genau passiert und wo genau tritt der Fehler auf. Bitte liefere ein paar mehr Details, denn eine so kurze Fehlerbeschreibung nützt mir in diesem Fall leider gar nichts.

    Ich danke dir trotzdem für dein offenes und ehrliches Feedback. Glaub mir, auch ich bin bemüht, jetzt schnellstmöglich auf offene Kommentare einzugehen!

Fabian schrieb am Antworten

Hallöchen,

klasse Tutorial, hat mir als Einsteiger wirklich sehr weitergeholfen. Gerade versuche ich es soweit zu erweitern, um auch ein paar Parameter mitgeben zu können. Man sollte ja auch in einer Rubrik zum Beispiel auf die Bilder des Montats April verlinken können. Daran beisse ich mir gerade die Zähne auf. Vielleicht haben ja auch andere dieses Problem und Du findest Zeit das Tutorial noch zu erweitern oder mir einen Hinweis geben, wie ich da ansetzen muß. Wäre Spitze, vielen Dank.

    Fabian schrieb am Antworten

    Und noch eine kleine Anmerkung: Biete doch auch einen RS-Feed für deinen Blog an – Würde sich gut machen in der Rubrik „Programmierung“ in meinem RRS-Reader 😉

      Lars Ebert schrieb am Antworten

      Hallo Fabian,

      ich werde mich darum kümmern, bald wieder einen RSS-Feed anzubieten. Früher lief das hier über Googles Feed-Dienst, aber der ist ja nicht mehr.

      Danke für deinen Hinweis!

      Lars Ebert schrieb am Antworten

      Ich habe gerade festgestellt, dass es unter advitum.de/feed schon einen Feed gibt. Ich muss den nur noch irgendwo verlinken, dass man den auch findet!

        Fabian schrieb am Antworten

        Hallo Lars, RSS hat funktioniert. Danke Dir.

Michael schrieb am Antworten

Hi Lars, super Tutorial!! Wie bekomme ich denn statt domain.de/index.php eine url wie: domain.de und für z.b. domain.de/impressum.php -> domain.de/impressum/ ?
Für die Startseite würde ja die domain alleine reichen und für die anderen Seiten hätte ich gerne eine „Ordner Optik“.
Wäre super wenn du mir bzw. uns das erklären kannst. is sicher nur eine oder zwei Zeilen. 🙂
Danke.

    Lars Ebert schrieb am Antworten

    Hallo Michael,

    dazu sind ein paar kleine Änderungen sowohl am PHP als auch am JS nötig:

    1.

    $urlParts = array();
    preg_match('/\/([a-z]+)(\?.*)?$/', $_SERVER["REQUEST_URI"], $urlParts);
    if(isset($urlParts[1]) && isset($titles[$urlParts[1]])) {
    	$page = $urlParts[1];
    } else {
    	$page = 'index';
    }

    2.

    <?php
    	foreach($titles as $key => $title) {
    		echo '
    <li>
    	<a href="' . ($key != 'index' ? $key . '/' : '') . '" class="onPage" rel="nofollow">' . $title . '</a>
    </li>';
    	}
    ?>

    3.

    function bindLinks(links) {
    	links.click(function() {
    		var page = $(this).attr('href');
    		if(page == '/') {
    		    page = 'index';
    		}
    		if(href.substr(page.length - 1) == '/') {
    		    page = page.substr(page.length - 1);
    		}
    		
    		changePage(page);
    		
    		return false;
    	});
    }

    4.

    if(forward) {
        if(page == 'index') {
            history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost/kleines/ajax-onepage/');
        } else {
    	    history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost/kleines/ajax-onepage/' + page + '/');
    	}
    }

    5.

    $(window).bind('popstate', function(event) {
    	var rawFileName = window.location.href.match(/\/([a-z]+)(\?.*)?$/);
    	
    	changePage(rawFileName[1], false);
    });

    Mit diesen 5 Änderungen sollten die Pfade so aussehen, wie du dir das vorstellst!

Michael schrieb am Antworten

Hi Lars,

erstmal vielen Dank für deine Hilfe! Seit halb 8 schraube ich rum und bekomme es nicht hin. Mit deinen Änderungen, komm ich leider nicht ganz weiter. es werden nur die „ordner“ nacheinander in die url gehängt. Genial wäre es, wenn du eine Version, die funktioniert hochladen könntest, vielleicht hab ich auch nur irgendwo einen Fehler..

Danke im Voraus!!

    Lars Ebert schrieb am Antworten

    Hallo Michael,

    ich habe jetzt das Script selbst einmal getestet und noch ein paar Fehler dabei gefunden. Sorry. Hier folgt nun das fertige Script. Wichtig: In beiden Dateien gibt es am Anfang jeweils eine Variable baseUrl bzw. $baseUrl. Hier muss jeweils die Wurzelseite des Scriptes eingefügt werden, da die Pfade nun absolut benötigt werden.

    <?php
    	
    	$baseUrl = '/kleines/ajax-onepage/';
    	
    	$titles = array(
    		'index' => 'Startseite',
    		'contact' => 'Kontakt',
    		'impressum' => 'Impressum'
    	);
    	
    	$urlParts = array();
    	preg_match('/\/([a-z]+)\/?$/', $_SERVER["REQUEST_URI"], $urlParts);
    	if(isset($urlParts[1]) && isset($titles[$urlParts[1]])) {
    		$page = $urlParts[1];
    	} else {
    		$page = 'index';
    	}
    	
    	echo '<?xml version="1.0" encoding="UTF-8" ?>'; 
    ?>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title><?php echo $titles[$page]; ?> - Ajax-OnePage</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	
    	<script type="text/javascript" src="<?php echo $baseUrl; ?>js/jquery-1.7.2.min.js"></script>
    	<script type="text/javascript">
    		/* <![CDATA[ */
    			var titles = <?php echo json_encode($titles); ?>;
    		/* ]> */
    	</script>
    	<script type="text/javascript" src="<?php echo $baseUrl; ?>js/main.js"></script>
    </head>
    
    <body>
    	<header>
    		Hier könnte ein Header stehen...
    	</header>
    	<nav>
    		<ul>
    			<?php
    				foreach($titles as $key => $title) {
    					echo '
    			<li>
    				<a href="' . $baseUrl . ($key != 'index' ? $key . '/' : '') . '" class="onPage" rel="nofollow">' . $title . '</a>
    			</li>';
    				}
    			?>
    		</ul>
    	</nav>
    	<div id="swapper"><?php include($_SERVER["DOCUMENT_ROOT"] . $baseUrl . 'pages/' . $page . '.page.php'); ?></div>
    	<footer>
    		Hallo, ich bin der Footer. Ich bleibe immer hier, egal wie du durch die Seite navigierst...
    	</footer>
    </body>
    
    </html>
    var baseUrl = '/kleines/ajax-onepage/';
    
    function bindLinks(links) {
    	links.click(function() {
    		var page = $(this).attr('href').substr(baseUrl.length);
    		if(page.substr(page.length - 1) == '/') {
    		    page = page.substr(0, page.length - 1);
    		}
    		if(page == '') {
    		    page = 'index';
    		}
    		
    		changePage(page, true);
    		
    		return false;
    	});
    }
    
    function changePage(page, forward) {
    	$.ajax(baseUrl + 'pages/' + page + '.page.php', {
    		success: function(data) {
    			$('title').text(titles[page] + ' - Ajax-OnePage');
    			$('#swapper').html(data);
    			bindLinks($('#swapper a.onPage'));
    			
    			if(forward) {
    				if(page == 'index') {
    					history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost' + baseUrl);
    				} else {
    					history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost' + baseUrl + page + '/');
    				}
    			}
    		}
    	});
    }
    
    $(document).ready(function() {
    	bindLinks($('a.onPage'));
    	
    	$(window).bind('popstate', function(event) {
    		var rawFileName = window.location.href.match(/\/([a-z]+)\/?$/);
    		
    		changePage(rawFileName[1], false);
    	});
    });

    Ich hoffe, das funktioniert jetzt endlich! Viel Erfolg!

Michael schrieb am Antworten

Wow! Es funktioniert super!!! Vielen Dank! 🙂

    Lars Ebert schrieb am Antworten

    Super. Es freut mich, dass es klappt. Danke für deine Kommentare!

      Fabian schrieb am Antworten

      Supi, das übernehme ich doch auch gleich. Was meinst Du, hättest Du mir auch einen Ansatz für mein Problem vom 03. Mai ? Dann wäre das Script perfekt!

      Grüßle aus Stuttgart, Fabian

      Saskia schrieb am Antworten

      Hallo Lars,

      grade das Tutorial ausprobiert und auch die Änderungen in deinen Kommentar vom 8.Mai mit eingebaut.
      Bei mir funktioniert jetzt allerdings auch der zurück-button nicht mehr, so wie bei Johannes am 28. April.
      (Die Adresszeile ändert sich, aber der Inhalt wird nicht angepasst)
      Wie muss ich denn den regulären Ausdruck in der match-Funktion verändern, damit er auch mit den geänderten Adressen (also nur / statt .php) funktioniert? (meine Versuche sind bis jetzt leider kläglich gescheitert….)
      Oder liegt das Problem wo anders?

      Danke schonmal!

        Lars Ebert schrieb am Antworten

        Hallo Saskia, pack mal in die Funktion die beim popstate-Event ausgeführt wird, ein alert('Test'); rein. Wenn Du auf den Zurück-Button klickst, müsste dann „Test“ ausgegeben werden. Wenn nicht, hängt es irgendwo am popstate-Event.

        Wenn „Test“ ausgegeben wird, ist innerhalb der Funktion noch etwas falsch. Lass Dir dann einfach mal den Inhalt von rawFileName ausgeben. Dann siehst Du, ob dein RegEx funktioniert. Das Pattern /\/([a-z]+)\/?$/ aus meinem Kommentar sollte aber eigentlich funktionieren.

          Saskia schrieb am

          Hallo, vielen Dank für die schnelle Antwort!
          Jetzt klappt alles.
          Ich glaube ich hab zuerst übersehen, dass das Pattern auch geändert wurde und bei meinen Versuchen wo der Fehler sonst liegen könnte, hab ich dann auch alles andere zerstört… 😉
          manchmal ist einfach copy-paste dann doch sinnvoller…

          Lars Ebert schrieb am

          Super dass es jetzt klappt. Kann man das ganze jetzt irgendwo auch bei dir in Action sehen?

      Patrick P. schrieb am Antworten

      Hi,

      zunächst mal danke 🙂 wirklich coole Sache. Hatte bisher so meine Probleme mit dem ganzen Seiten laden / Navigation…

      Das hier ist eine tolle Lösung.

      Nun noch eine kleine frage (Wenn du die Zeit dafür findest, wäre sicher auch für Andere interessant):

      Könntest du das ganze vielleicht bei Gelegenheit noch ausbauen, sodass die Seiten auch Unterseiten in einer Art Baumstruktur hat
      —- Beispiel —

      Seite1
      Seite2
      Seite3

      Unterseite1
      Unterseite2

      Seite4

      ————-
      für die Navigation, um es dann mit Dropdownmenüs anzuzeigen.

      Danke schon mal im vorraus

      Gruß Patrick

Dennis schrieb am Antworten

Hallo! Tolles Script!
Ich versuche das ganze gerade in WordPress einzubinden und komme da nicht weiter. Hast Du dazu schon was geschrieben irgendwo? Ich nutze auch die beauty-url Geschichten (www.domain.de/suess/e/url/ ) in der Permalinkstruktur von WordPress. Ist dieses Script überhaupt kompatibel mit WP? Über eine Antwort würde ich mich freuen, vielen Dank!
LG, Dennis
Nachtrag: Was ich auch nicht ganz verstehe ist der Pfad /kleines/ajax-onepage/ ??? Wo, was und wie soll das hin? Im vorherigen Script habe ich dazu nix gesehen…

    Lars Ebert schrieb am Antworten

    Hallo Dennis, ich habe dieses Script bisher noch nie mit WordPress getestet. Meine Lösung basiert darauf, dass der Inhalt getrennt in einer Datei liegt, was bei WP ja nicht der Fall ist. Hier müsstest du ggf. noch Filtern, was zum Inhalt gehört und was nicht. Irgendwo in den Kommentaren steht dazu aber auch schon was!

    Vielleicht schreibe ich bald mal einen Artikel, in dem ich mir WordPress vornehme!

muha schrieb am Antworten

wenn ich ein element der ordnung h1 öffne, schließe ich es auch wieder…

bei dir sieht das so aus blabla

richtig wäre aber blabla

sonst entstehen h1-elemente innerhalb eines h1-elemntes welches nicht geschlossen wird…

    Lars Ebert schrieb am Antworten

    Zwar sind in Deinem Kommentar die Tags leider verschwunden, ich weiß aber, was Du meinst. Danke für den Hinweis, ich habe das berichtigt!

      Marco schrieb am Antworten

      Hi,
      starkes Tutorial, vielen Dank.
      HAst du vielleicht einen Tipp für mein Problem. Ich habe ein Problem im Firefox. In anderen Browsern funktioniert alles. Im FF wird die Seite nicht geladen, sprich wenn ich die URL http://www.url..de/contact.php eingebe wird der Content nicht geladen. Wenn ich von der index dort hin navigier funktioniert alles.
      Viele Grüße

HyperBuzz schrieb am Antworten

Hey super beispiel…

aber für faule haste das ja leider nicht (runtersaug)

😉

seufZ schrieb am Antworten

Hallo, ich habe ein Problem mit deinem Code, und zwar wird beim KLICK auf
„Arbeiten, Neuigkeiten, Kontakt, Impressum“ nicht in das div „#modul_main“
(du nennst es #swapper / ich habe es überall umbenannt!!!)
„geladen, sondern irgendwie führt der link zu einer neuen Seite!
Ich habe schon alles versucht, aber ich finde den Fehler nicht!
Link: http://tinyurl.com/orxvmho
Würde mich über Deine Hilfe zur Fehlerfindung sehr freuen!

*seufZ*

    Lars Ebert schrieb am Antworten

    Öffne die Fehler-Konsole in Deinem Browser! JQuery konnte nicht geladen werden. Viel Erfolg!

      seufZ schrieb am Antworten

      Entschuldige das ich nocheinmal Nachhake, was bedeutet das nun?
      Ich verstehe leider nicht so ganz? Was bedeutet das nun auf deutsch?

      *seufZ*

        Lars Ebert schrieb am Antworten

        Die jQuery-Datei kann nicht geladen werden. Deshalb funktioniert das ganze JavaScript nicht. Prüfe die Pfade zur jQuery-Datei! Ich empfehle Dir trotzdem, Dich mit der Fehler-Konsole in Deinem Browser zu beschäftigen, dort siehst Du nämlich direkt den Fehler!

seufZ schrieb am Antworten

Alles dürfte an seinem richtigen Platz liegen: screenshot: http://tinyurl.com/psv9uk2

Toll, mir als Anfänger sagt das sehr viel: screenshot: http://tinyurl.com/or9jvnc

Ich komme nicht weiter, kannst Du es Dir nicht mal angucken.

Villeicht taugt das ganze auch nicht! :o/

Heiko schrieb am Antworten

Hallo,
vielen Dank für das Tutorial. Es läuft soweit super und ich bin begeistert.
Ich hätte jetzt noch gerne den aktiven Link hervorgehoben und versuche diesem li-Element die Klasse „active“ erst einmal nur mit Hilfe von php zu geben und dann natürlich noch zusätzlich mit jquery. Bekomme es aber nicht wirklich hin. Hast du da nen Tipp?

    Lars Ebert schrieb am Antworten

    Das kommt darauf an, an welcher Stelle es scheitert. Was hast Du bis jetzt verändert?

Heiko schrieb am Antworten

Danke für die schnelle Antwort, hab es doch noch geschafft! Puhhh 🙂
In der foreach-Schleife ne Abfrage:
if ($key==$page) { //Klasse setzen }
else { //hier nicht setzen }

Inder main.js hab ich in der functions bindLinks(links) {} folgendes hinzugefügt:
$(„li“).removeClass(„active“);
$(this).closest(‚li‘).addClass(‚active‘);
Könnte man hier sicherlich auch mit „toggle“ machen…
Gibt vielleicht einfachere/elegantere Lösungen aber es funktioniert.

Deine Ansatz finde ich immer noch Klasse, baue meine Webseiten meistens mit ausgelagerten Header- und Footer-Dateien auf, ähnlich wie bei WordPress.

Ludwig schrieb am Antworten

Servus,
ich habe einen Server der mit nginx läuft und nicht mit Appache. Deshalb funktioniert nach meinen Infos die .htaccsess datei bei meinem Server nicht. Sobald ich einen Link anklicke (ohne JavaScript aktiv zu haben) lädt der einfach die Seite anstatt, die Index Seite mit dem entsprechenden Inhalt.
Wie kann ich das fixen?

Diese Artikel könnten dir auch gefallen