Antworten auf deine Fragen:
Neues Thema erstellen

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

SWFP

SWFP Mitglied

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:
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

Aktives Mitglied

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:
<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:

Code:
$(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:

Code:
$(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:

Code:
$(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

SWFP Mitglied

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

Aktives Mitglied

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 ...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben