jQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)

[Rolf B]

Hallo jQuietsch,

rein technisch kannst Du einen iframe als Container benutzen. Du kannst ihn ohne src Attribut auf deine Seite setzen, und dann am contentDocument herumfummeln. Oder Du setzt ihn mit src-Attribut auf deine Seite und lädst ein Basis-Dokument vom gleichen Server (sonst gibt's cross-domain Blockaden vom Browser). Das Basis-Dokument kann dann schon mal die nötigen Styles mitbringen. Es kann auch JavaScript mitbringen, du kannst aus dem Rahmendokument Eventlistener auf Links oder Buttons im Child-Dokument setzen.

Die Frage ist nur, warum? Ein iframe ist meines Wissens zum Einbinden fremder Inhalte gedacht, aber deine Inhalte sind nicht fremd. Du kannst also statt des iframe genauso gut Boxen im Document deiner Hauptseite verwenden. Eben <nav> für die Navigation (wenn es denn eine Navigation ist) und <main> für den Hauptinhalt.

Die nächste Frage, die Du Dir stellen solltest, ist: Was passiert, wenn JavaScript abgeschaltet ist. In deinem Konzept wäre die Seite dann funktionslos. Abgesehen davon führt der Google Bot kein Script aus. D.h. eine Inhalte würden nicht indiziert.

Eine gute und suchmaschinenfreundlichere Seite, sagen wir "artikel.php", würde die Artikelliste auf dem Server erzeugen und alle Einträge darin als Links ausgeben. Jeder dieser Links würde auf Adressen wie artikel.php?nr=003 zeigen, und die Serverseite würde beim Aufruf einer solchen Adresse die Details zum Artikel #003 ins Detailfenster eintragen. Mit iframes wäre das viel schwieriger zu lösen.

Wenn Du kein PHP am Server verwenden kannst oder willst, dann kannst Du auch für jede Detailansicht eine eigene HTML Seite erzeugen und über rewrites in der Serverkonfiguration (Apache: siehe mod_rewrite) dafür sorgen, dass der Aufruf von artikel.html?nr=003 zur Anzeige von artikel_003.html führt. Du kannst statt dessen auch Server Side Includes verwenden (falls dein Hoster das unterstützt), um je nach Artikelnummer ein passendes Detailfragment zu includieren.

Wenn JavaScript eingeschaltet ist, fängt es die click-Events auf diese Links ab, erzeugt die Detailansicht, verhindert die Browserreaktion auf den Klick (preventDefault) und ändert die URL in die Browser-History (window.history.pushState). Über das popstate Event kann das Script auch die Back und Forward Buttons des Browsers behandeln und in Ajax-Calls für die Details umwandeln. Das ist alles nicht ganz trivial und wird durch jQuery nur unwesentlich einfacher. Es gibt andere JS-Libraries, die hier mehr Support bieten (die ich persönlich nicht nutze; aber ich meine, Angular und React können das. Im einfachsten Fall: Sammy.js). Diese Frameworks sind aber meiner Meinung nach nichts für JS-Einsteiger; sämtliche Tutorials dafür würden Dich überfordern.

Das HTML in deinem CSV ist übrigens nicht in Ordnung: Zu einem <p> gehört immer auch ein </p>. Der Browser denkt sich ein fehlendes </p> zwar auch gerne mal hinzu, aber darauf sollte man sich nicht verlassen.

Viele diese Überlegungen stehen und fallen mit dem Einsatzzweck und dem Hosting der Seite. Ist das eine Internetseite? Intranet? Von einem Webserver geladen (welcher?) oder persönlich für Dich aus file:///? Welche serverseitigen aktiven Komponenten (PHP, SSI) sind verfügbar und werden von Dir verstanden?

Rolf