Anzeige

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

URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht | PSD-Tutorials.de

Erstellt von SWFP, 28.08.2013.

  1. SWFP

    SWFP SWFP Mitglied

    Dabei seit:
    29.04.2011
    Beiträge:
    279
    Geschlecht:
    männlich
    Software:
    EDIUS, Phase 5 html Editor, Notepad++, MAGIX Video deluxe
    Kameratyp:
    JVC Enverio
    URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht
    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.
    Code (Text):
    1.  
    2. location.hash = 'About'
    3. history.pushState("index.php?page=about", "Über uns", "about");
    4.  
    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
     
    #1      
  2. Curanai

    Curanai Aktives Mitglied

    Dabei seit:
    20.08.2011
    Beiträge:
    397
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Notepad++, Brackets, HeidiSQL, CC, FL Studio, SEO PowerSuite (auch BuzzBundle), Rocksmith :D
    Kameratyp:
    Samsung S7 Edge :D
    URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht
    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:

    Code (Text):
    1.  
    2. <div id="menu">
    3.  <a href="menu1.php" rel="tab">menu1</a> |
    4.  <a href="menu2.php" rel="tab">menu2</a> |
    5.  <a href="menu3.php" rel="tab">menu3</a>
    6. </div>
    7.  
    Um die Standardfunktionalität des Links (Anchor) zu überschreiben, nimm das folgende jQuer Snippet:

    Code (Text):
    1.  
    2. $(function(){
    3.   $("a[rel='tab']").click(function(e){
    4.     // hier die Aktion vom Link!
    5.  
    6.     return false;
    7.   });
    8. });
    9.  
    10.  
    Um jetzt den AJAX-Content zu bekommen und die URL zu ändern (nämlich auf den Link) - aber ohne die Seite zu refreshen:

    Code (Text):
    1.  
    2. $(function(){
    3.   $("a[rel='tab']").click(function(e){
    4.     // e.preventDefault();
    5.     /*
    6.     wenn Du obige Zeile auskommentierst, ändern alte Browser
    7.     ohne HTML5 die URL nicht, aber zeigen AJAX Content
    8.  
    9.  
    10.     wenn kommentiert, Browser ohne HTML5 laden die Seite je Link
    11.     */
    12.     // hole Link ...
    13.  
    14.     pageurl = $(this).attr('href');
    15.  
    16.     // hole Content und zeige im Div 'content' (fiktiv)
    17.     $.ajax({url:pageurl+'?rel=tab',success: function(data){
    18.       $('#content').html(data);
    19.     }});
    20.  
    21.     // ändern der Browser-URL auf Link ...
    22.     if(pageurl != window.location){
    23.       window.history.pushState({path:pageurl},'',pageurl);
    24.     }
    25.  
    26.  
    27.     // Rückgabe false, um Refresh zu blocken
    28.     return false;
    29.   });
    30. });
    31.  


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

    Code (Text):
    1.  
    2. $(window).bind('popstate', function(){
    3.   $.ajax({url:location.pathname+'?rel=tab',success: function(data){
    4.     $('#content').html(data);
    5.   }});
    6. });
    7.  
    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.
     
    #2      
  3. SWFP

    SWFP SWFP Mitglied

    Dabei seit:
    29.04.2011
    Beiträge:
    279
    Geschlecht:
    männlich
    Software:
    EDIUS, Phase 5 html Editor, Notepad++, MAGIX Video deluxe
    Kameratyp:
    JVC Enverio
    URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht
    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?
     
    #3      
  4. Curanai

    Curanai Aktives Mitglied

    Dabei seit:
    20.08.2011
    Beiträge:
    397
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Notepad++, Brackets, HeidiSQL, CC, FL Studio, SEO PowerSuite (auch BuzzBundle), Rocksmith :D
    Kameratyp:
    Samsung S7 Edge :D
    URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht
    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 ...
     
    #4      
  5. SWFP

    SWFP SWFP Mitglied

    Dabei seit:
    29.04.2011
    Beiträge:
    279
    Geschlecht:
    männlich
    Software:
    EDIUS, Phase 5 html Editor, Notepad++, MAGIX Video deluxe
    Kameratyp:
    JVC Enverio
    URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht
    AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht

    Gut. Vielen Dank.
     
    #5      
Seobility SEO Tool
x
×
×