Yellow Inhalte nachladen

Vor wenigen Tagen erst hatte ich mich mit dem Yellow Ticker nachladen beschäftigt. Die Lösung via »iFrame« funktioniert zwar, hatte jedoch ein paar Mängel. Deshalb: Zweiter, subjektiv besserer Versuch.

Ein primäres Problem der Lösung via »iFrame«: Die Größenanpassung. Die dafür gefundene Lösung erweist sich insbesondere auf Mobilgeräten als gewöhnungsbedürftig, weil das unmotiviertes Springen beim Scrollen der Seite auslöst. Wer sein Browserfenster auf einem großzügigen Monitor gerne in der Größe verändert, kann ebenfalls in den Genuss wilden Geflackeres kommen.

Weil bereits diese Lösung nur mit etwas Javascript funktioniert, war die ursprüngliche Wunschanforderung „wenn möglich ohne JS“ bereits über Bord gegangen. Verzögertes Nachladen von Seitenelementen is ohne Javascript – nach meinem aktuellem Wissensstand – offenbar unmöglich. Doch wenn es eh erforderlich ist, dann doch bitte elegant.

Bei meinen Experimenten bin ich über ein Script der w3school gestolpert. Das löste die Anforderung perfekt ohne Nacharbeiten, weshalb ich es unverändert verwende. Was mir daran sehr gefällt: Es funktioniert auch ohne die ansonsten immer und überall für solche Anwendungen referenzierte »jQuery«-Bibliothek. Die mag ja toll sein, doch wozu eine dicke Bibliothek laden, wenn doch nur eine Funktion daraus erforderlich ist. Wobei die out of the box keineswegs verfügbar ist; da muss, wenn es stabil funktionieren soll, noch Zusatzscode drumherum geschrieben werden, der etwa den Umfang des gefundenen Scripts hat.

Damit sich das fluffig in Yellow einfügt, habe ich die Extension »dload« geschrieben. Die erledigt alles mit dem damit verfügbaren Yellow-Shortcut

[dload Datei id Hinweis]

In der Anwendung entspricht es dem „iFrame-Verfahren“: Die eingebettete Datei sollte ebenfalls weder Kopf- noch Fußzeilen haben – wenn doch, werden sie auch dargestellt. Was in meinem konkreten Fall bereits erledigt war, denn ich hatte entsprechende Daten gerade erst für den „iFrame-Trick“ erstellt. Deshalb war die Umstellung außerordentlich übersichtlich:

«iFrame« raus, »dload« rein – fertig.

Der Charme dieser Lösung

Gegenüber dem »iFrame« hat dieser Ansatz einige Vorteile:

  • Über den Hinweis lässt sich gegebenenfalls ein Link einbinden, mit dem die Datei1 per Klick geöffnet werden kann, falls kein Javascript vorhanden sein sollte.
  • Die eingefügte Seite wird „als Code“ integriert. Es ist keine Nachsorge erforderlich, wenn der Browser die Größe ändert, etc.
  • Mit dem Nachladen nimmt der <DIV>-Block ohne weitere Zuarbeit den erforderlichen Platz ein.
  • Es entsteht kein „Leerraum“, der sich anschließend noch verändert. Wird kein Hinweis mitgegeben, wird keinerlei Platz beansprucht.
  • Die Seite sieht mehr oder minder sofort „vollständig“ aus, weil das Nachladen erst erfolgt, wenn die Fußzeile sichtbar ist.
  • Das Script wird nur geladen, wenn es benötigt wird. Hierfür stehen zwei Strategien zur Verfügung, die bequemere ist voreingestellt (s. Beschreibung der Extension).
  • Für Links in das Hauptfenster ist in der eingebetteten Datei kein base-Befehl erforderlich.
  • Auf Mobilgeräten gibt es kein Rumgehopse mehr.
  • Subjektiv werden die Daten der nachgeladenen Datei von den Browsern besser im Cache verwaltet.

Grundsätzlich lässt sich das natürlich auch auf normalen HTML-Seiten nutzen:

<!DOCTYPE h­tml>
<head></head>
<body><div w3-include-html="../ticker/">
<b>Infos werden abgerufen …</b>
</div><script src="dload.js"></script>
<script>includeHTML();</script>
</body>
</h­tml>

Das Script kann wahlweise direkt an der Quelle bei w3schools oder aus meinem GitHub-Repository geholt werden. In meinem Script ist lediglich die Quelle zum Original hinzugefügt und es heißt aus Yellow-Konformitätsgründen „dload.js“.


  1. Zweckmäßigerweise sollte es eine zweite sein, die der eingebundenen zwar entspricht, jedoch Kopf- und Fußzeilen hat. Sonst landen den Link Anklickende womöglich in einer Sackgasse. ↩︎