Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Curanai" data-source="post: 2232675" data-attributes="member: 534923">AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nichtHi 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 &quot;SEO-friendly&quot; (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]&lt;div id=&quot;menu&quot;&gt;&nbsp;&lt;a href=&quot;menu1.php&quot; rel=&quot;tab&quot;&gt;menu1&lt;/a&gt; |&nbsp;&lt;a href=&quot;menu2.php&quot; rel=&quot;tab&quot;&gt;menu2&lt;/a&gt; |&nbsp;&lt;a href=&quot;menu3.php&quot; rel=&quot;tab&quot;&gt;menu3&lt;/a&gt;&lt;/div&gt;[/code]Um die Standardfunktionalität des Links (Anchor) zu überschreiben, nimm das folgende jQuer Snippet:[code]$(function(){&nbsp; $(&quot;a[rel=&#039;tab&#039;]&quot;).click(function(e){&nbsp; &nbsp; // hier die Aktion vom Link!&nbsp; &nbsp; return false;&nbsp; });});[/code]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(){&nbsp; $(&quot;a[rel=&#039;tab&#039;]&quot;).click(function(e){&nbsp; &nbsp; // e.preventDefault();&nbsp; &nbsp; /*&nbsp; &nbsp; wenn Du obige Zeile auskommentierst, ändern alte Browser &nbsp; &nbsp; ohne HTML5 die URL nicht, aber zeigen AJAX Content&nbsp; &nbsp; wenn kommentiert, Browser ohne HTML5 laden die Seite je Link&nbsp; &nbsp; */ &nbsp; &nbsp; // hole Link ...&nbsp; &nbsp; pageurl = $(this).attr(&#039;href&#039;);&nbsp;&nbsp; &nbsp; // hole Content und zeige im Div &#039;content&#039; (fiktiv)&nbsp; &nbsp; $.ajax({url:pageurl+&#039;?rel=tab&#039;,success: function(data){&nbsp; &nbsp; &nbsp; $(&#039;#content&#039;).html(data);&nbsp; &nbsp; }});&nbsp;&nbsp; &nbsp; // ändern der Browser-URL auf Link ...&nbsp; &nbsp; if(pageurl != window.location){&nbsp; &nbsp; &nbsp; window.history.pushState({path:pageurl},&#039;&#039;,pageurl);&nbsp; &nbsp; }&nbsp; &nbsp; // Rückgabe false, um Refresh zu blocken&nbsp; &nbsp; return false;&nbsp; });});[/code]Sooooo ... aber nun arbeitet der history.back-Button ja nicht wie normal - also überschreibst Du den noch:[code]$(window).bind(&#039;popstate&#039;, function(){&nbsp; $.ajax({url:location.pathname+&#039;?rel=tab&#039;,success: function(data){&nbsp; &nbsp; $(&#039;#content&#039;).html(data);&nbsp; }});});[/code]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. <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />Grüße vom Kaffeebecherrand.</blockquote>

[QUOTE="Curanai, post: 2232675, member: 534923"] [b]AW: URl ohne .htaccess mit JavaScript und History API ändern funktioniert nicht[/b] 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> [/code] 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; }); }); [/code] 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; }); }); [/code] 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); }}); }); [/code] 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. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?