Ich versuche, den PushState-Verlauf auf meiner Website zu implementieren, um Inhalte von einer single.php-Seite in einen index.php-Container zu laden.

Meine Website hat zwei Hauptseite: index.php und single.php.

In der index.php gibt es Links, die pushstate script aufrufen:

<a class="phplink" href="/Formlabs-3D-printer" title="Formlabs 3D printer">Post 12</a> 
<a class="phplink" href="/Minimal-Bumper-for-iPhone-5" title="Minimal Bumper for iPhone 5">Post 11</a>

Auf meiner single.php-Seite verwende ich die Methode isset get, um Inhalte dynamisch zu laden, die dem auf index.php geklickten Link entsprechen:

<?php
if (isset($_GET["page"])) { 
//I do some stuff in order to echo content
?>

In meiner .htaccess-Datei habe ich den URL-Link umgeschrieben (der Grund dafür, dass in index.php der Link bereinigt wird):

Options +FollowSymLinks
RewriteEngine on
RewriteRule /([a-zA-Z0-9\-]+)$ /index.php 
RewriteRule /([a-zA-Z0-9\-]+)$ /single.php?page=$1 [L]

Und hier mein Pushstate-Skript:

$.ajaxSetup({cache:false});
$(".phplink").click(function(){
    var $post_link = $(this);
    load_content($post_link.attr('title'),$post_link.attr('href'));
    return false;
}); 

window.onpopstate = function(event) {
    if (event.state) {
        load_content(event.state.title, window.location.pathname, true);
    } else {
        var stateObj = {
        title: document.title,
        url: window.location.pathname,
        };
    url = window.location.pathname;
    load_content(url,url);
    }
}  

function load_content(title,url,skipHistory) {
    $.get(url,function (data) {
        document.title = title;
        var stateObj = {
            title: title,
            url: url
            };
        if (!skipHistory) {
            if (typeof window.history.pushState == 'function') {
                window.history.pushState(stateObj,title,url);
            }
        }
        if(url.substring(1) != '') {
            $("#ajaxify_container").html("loading...");
            $("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2');  
        } 
        else {
            $("#ajaxify_container").html('');   
        }
    });
}

Mein PushState - Skript lädt Inhalte beim Klicken auf einen Link (auf).phplink klicken). Es funktioniert auch für die Vor- / Zurück-Taste.

1. PROBLEM: Wenn ich den Browser aktualisiere (mit einem Pushstate-Link in der URL), funktioniert er auf Google Chrome (Inhalt von single.php in index.php-Container laden), aber nicht in IE10 (nichts wird geladen, er bleibt auf index.php Seite).

2. PROBLEM: Wenn ich Javascript deaktiviere, um zu sehen, was für Googlebot (für SEO) passiert. Ich kann die single.php Seite nicht laden / erreichen, sie bleibt immer auf index.php. Die single.php-Seite kann also nicht von einer Suchmaschine gecrawlt werden (ich nehme an, bin mir aber nicht sicher). Dieses Verhalten ist normal, da ich in meiner .htaccess-Datei festgelegt habe, dass "alle diese Links" zu index.php umgeleitet werden.

Ich mache diesen Trick, weil ohne Pushstate die single.php-Seite geladen wird, wenn ich sie aktualisiere. Und ich will dieses Verhalten nicht. Ich möchte, dass beim Aktualisieren einfach der Inhalt von single.php in den index.php-Container geladen wird.

Mein Hauptproblem (Problem 2) ist also, dass ich nicht weiß, wie ich mein Skript oder meine Links in meine PHP-Seite schreiben soll, um Inhalte in meine index.php-Datei zu laden, wenn ich auf klicke, aktualisiere und zurück / weiter gehe.

Kann onpopstate im normalen Verhalten von pushstate beim Aktualisieren des Browsers Inhalte von einer Seite in einen Container einer anderen Seite laden (Inhalte von single.php in einen Container von index.php laden)?

Ich hoffe, dass mir jemand helfen und erklären kann, wie es funktioniert. Ich habe einige Schwierigkeiten zu verstehen, wie es mit Links funktioniert.

Entschuldigung für mein Englisch, ich bin Französisch ...