Antworten zum Thema „URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht“

[SWFP]

Hi,
ich habe einmal ausprobiert, da mein Serveranbieter kiene .htaccess-Dateien akzeptiert, meine URL anderweitig zu ändern.
Hierzu gibt es bekanntlich verschiedenen Möglichkeiten, neben der Möglichkeit es mit jQuery zu machen, von der ich bereits nur gehört habe, habe ich eine JS-Methode probiert und danach das History API.

location.hash = 'About'
history.pushState("index.php?page=about", "Über uns", "about");

Beide lieferten mir das gleiche Ergebnis, doch immer noch fehlt etwas. Die URL ist ja nicht wirklich da. Aber wie kann ich verhindern, dass die Seite beim Reload nicht mehr gefunden wird?
SWFP

 

[Curanai]

AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht

Hi SWFP,

wenn ich Dich also richtig verstehe, besteht Dein Problem darin, dass Du mit AJAX arbeitest und beim Reload der Seite bspw. eben dieser generierte Content (nachgeladen, umgestellt whatever) natürlich (!) verschwindet und die Ursprungsseite gezeigt wird (vor AJAX-Einfluss).

Eigentlich kann man dieses Problem mit Hashtags in den Griff bekommen, aber diese in der URL sind nicht "SEO-friendly" (von daher erkläre ich Dir das auch nicht). Denn wenn Du siehst wie Facebook oder Github das machen in einem HTML5-unterstützten (!) Browser ... ja, das geht - und eben anders.

Du bist eigentlich schon auf dem richtigen Weg - mit der HTML5 History API, um die URL der Seite ohne Refresh zu ändern. Ich nehme dafür jQuery - zeig ich Dir. :lol:

Nehmen wir mal (theoretisch) an, dass Du ein Menü wie folgt hast:

<div id="menu">
 <a href="menu1.php" rel="tab">menu1</a> |
 <a href="menu2.php" rel="tab">menu2</a> |
 <a href="menu3.php" rel="tab">menu3</a>
</div>

Um die Standardfunktionalität des Links (Anchor) zu überschreiben, nimm das folgende jQuer Snippet:

$(function(){
  $("a[rel='tab']").click(function(e){
    // hier die Aktion vom Link!

    return false;
  });
});

Um jetzt den AJAX-Content zu bekommen und die URL zu ändern (nämlich auf den Link) - aber ohne die Seite zu refreshen:

$(function(){
  $("a[rel='tab']").click(function(e){
    // e.preventDefault();
    /*
    wenn Du obige Zeile auskommentierst, ändern alte Browser 
    ohne HTML5 die URL nicht, aber zeigen AJAX Content


    wenn kommentiert, Browser ohne HTML5 laden die Seite je Link
    */ 
    // hole Link ...

    pageurl = $(this).attr('href');
 
    // hole Content und zeige im Div 'content' (fiktiv)
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
      $('#content').html(data);
    }});
 
    // ändern der Browser-URL auf Link ...
    if(pageurl != window.location){
      window.history.pushState({path:pageurl},'',pageurl);
    }


    // Rückgabe false, um Refresh zu blocken
    return false;
  });
});

Sooooo ... aber nun arbeitet der history.back-Button ja nicht wie normal - also überschreibst Du den noch:

$(window).bind('popstate', function(){
  $.ajax({url:location.pathname+'?rel=tab',success: function(data){
    $('#content').html(data);
  }});
});

Browser, die die HTML5 History API nicht unterstützen, laden die Links normal - aber wenn unterstützt ... voila, wie bei Facebook oder Github.

Ich hoffe, dass Dir das hilft ... doch warst Du ganz dicht dran.

Grüße vom Kaffeebecherrand.

 

[SWFP]

AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht

Ich habe es auch bereits mit History API versucht, jedoch nicht wie du es nun erklärt hast.

Können die drei Scripts in eine Datei?

 

[Curanai]

AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht

Die Frage kann ich Dir nicht beantworten, da ich Dein Modell nicht kenne - prinzipiell sollte Code immer zentral, versioniert, gecached und redundant verwendbar sein. Herrliche Welt dann ... um Dir einen Prototyp zu bauen, wird es aber gehen - vergiss jQuery nicht! Melde mich ab ins Wochenende ...

 

[SWFP]

AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht

Gut. Vielen Dank.