Wie rufe ich mit URL-Parametern dynamisch Inhalte auf?

[Rolf B]

Hallo borisbaer,

Update - ich habe nochmal Doku gelesen. Tatsächlich ein Hirnschaden meinerseits.

Ein history.pushState assoziert die neu dargestellte URL mit dem geladenen Dokument, lädt die URL aber nicht. Sozusagen reine Augenwischerei.

Ein Klick auf "zurück" wechselt darum die URL, aber da Du eine gefakte URL verlässt, bleibt das Dokument gleich und deshalb lädt der Browser nichts.

Also, das popstate Event muss an den Start. Es wird immer dann geworfen (gerade ausprobiert), wenn Du zu oder von einer URL wechselst, die die mit pushState entstanden ist. Immer wenn popstate fliegt, hat der Browser nichts geladen, und du hast die Chance, selbst was zu tun.

Gerade probiert - müsste klappen:

Zeile 2: aktuellen Path-Teil der URL auslesen (also /games/demons-souls/...)
Zeile 3: Position des letzten / finden
Zeile 4: Den Text hinter dem / lesen, das ist der Name des Tabs. ODER LEER!
Zeile 6-12: Zwei Fälle möglich.
Zeile 8-9 Wenn page leer ist, kennst den Namen der Default-Page nicht. Wenn Du also per popstate zu /games/demons-souls/ zurückkehrst, musst Du Dir den Namen der Default-Page aus dem ersten Tab herausholen. Als Nebeneffekt holst Du Dir einen Verweis auf das erste <a class="tab"> Element
Zeile 11: Hast Du einen tab-Namen, musst Du trotzdem das passende Link-Element finden.
Zeile 13: current-Klasse auf den Link zum aktuellen Tab setzen
Zeile 15: Tab-Inhalt holen

 1   window.onpopstate = function(popEvent) {
 2      let urlPath = window.location.pathName;
 3      let slash = page.lastIndexOf("/");
 4      let page = urlPath.substr(slash+1);
 5
 6      let $tab;
 7      if (page='') {
 8         $tab = $("#tabs .tab:first-of-type");
 9         page = $tab.attr("href");
10      else {
11         $tab = $("#tabs .tab[href="+CSS.escape(page)+"])
12      }
13      $tab.addClass("current").siblings().removeClass("current");
14
15      $.ajax({url: "subpages/"+page, function(html) {
16         ...
17      } });
18   }

So ganz blöd angemerkt: Diese Logik könnte man auch beim normalen Laden der Seite anwenden und das Erstbefüllen des Tab mit PHP überflüssig machen. ABER - das würde zu einem Zucken auf der Anzeige führen, weil die Seite erst mit leerem Tab geladen wird und es dann erst füllt. D.h. die PHP Logik ist für eine schönere Darstellung sinnvoll.

Rolf