IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - JavaScript: Inhalte in ein neues Fenster schreiben



JavaScript: Inhalte in ein neues Fenster schreiben

Wie schon in einem früheren Artikel erklärt, hier eine bessere Methode um Inhalte per JavaScript in einem neuen Fenster zu schreiben.


Autor: Patrick Faes (dreamer)
Datum: 20-11-2004, 09:39:43
Referenzen: siehe Text
Schwierigkeit: Fortgeschrittene
Ansichten: 14039x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einleitung

Ich habe früher schon mal einen Artikel darüber geschrieben, wie man in JavaScript solche kleine Boxen baut, die nach Betätigung eines Links aufpoppen und Interaktivität bieten. Ich habe jetzt einen besseren Weg gefunden dies zu erreichen, es könnte aber dennoch nützlich sein den Artikel zu lesen (HIER KLICKEN).

Diese Methode verwendet richtige PopUps (da sie ein Klick erfolgen, werden - die meisten - PopUp-Blocker diese durchgehen lassen), die allerdings keine neue Seite laden, sondern vom Client mit Inhalt gefüllt werden. Diese können vordefinierte Inhalte sein, dynamisch generierte Inhalte oder auch (wenn es sein muss) eine neue Seite die vom Server geladen werden muss.

Die Daten die dafür gebraucht werden, werden alle in assoziative Arrays gespeichert. Wir brauchen jeweils die folgende Daten:
  • URL (nur für Inhalte die vom Server geladen werden müssen)
  • Name des Fensters (Fenster worin die Seite geöffnet werden soll)
  • Fenstereigenschaften (Größe, Scrollbalken usw.)
  • Inhalt (komplettes HTML, das per JavaScript in die Box geschrieben wird)
Ein Beispiel (Anmeldefenster):
<script type="text/javascript">
box = new Array();
box["Anmeldefenster"] = new Array();
box["Anmeldefenster"]["URL"] = 'http://www.seite.de/anmelden.html';
box["Anmeldefenster"]["Fenstername"] = 'Box1';
box["Anmeldefenster"]["Fenstereigenschaften"] = 'height=100,width=120,resizable=no';
box["Anmeldefenster"]["Inhalt"] = '<html><head></head><body><table></table></body></html>';
</script>
Ich werde hier nochmal näher eingehen auf die einzelnen Daten:

Die URL muss nur angegeben werden wenn eine externe Datei im Fenster geladen werden soll.

Man kann einen Fensternamen angeben. Wenn Sie z.B. möchten, dass außer einer Anmeldebox noch irgend etwas anderes angezeigt wird, dann kan man den Boxen verschiedene Namen geben. Wenn jedesmal ein neues Fenster geöffnet werden soll, schreibt man _blank. Im Falle jeweils nur eine Box angezeigt werden soll, dann nennt man die einfach immer gleich, die Inhalte werden dann automatisch überschrieben. Dafür ist es dann aber nicht notwendig den Fensternamen in jedes Array zu schreiben, sondern kann einfach später in der Funktion open() fest eingebaut werden.

Die Fenstereigenschaften sind z.B. Höhe, Weite, Scrollbalken, Rand usw. Dies bestimmt also das Aussehen des Fensters (nicht der angezeigten Seite, das ist HTML). Beachten Sie dabei die Schreibweise.

Wenn die Inhalte des Fensters vom Client stammen sollen, dann sollten Sie entweder in der Array den Code aufnehmen (komplett mit HTML- und HEAD-Tags, eventuell auch eine Dokumenttyp-Anweisung), oder Sie generieren den Code auf Client-Level dynamisch. Den Text können Sie danach mit der Funktion eval() umsetzen in ausführbaren Code.

Bemerkung: wenn Sie sich dafür entscheiden z.B. die URL für eine von drei Boxen zu definieren, so müssen Sie in der Array für jede Box eine URL deklarieren (auch wenn diese leer bleibt).

Schauen wir uns jetzt erstmal die Funktion an:
<script>
function zeige(welche_box)
{
var Fenster = window.open(box[welche_box]["URL"],box[welche_box]
	      ["Fenstername"],box[welche_box]["Fenstereigenschaften"]);
with (Fenster.document)
  {
  open();
  if (box[welche_box]["Inhalt"]) write(box[welche_box]["Inhalt"]);
  close();
  }
}
</script>
Die Funktion ist recht einfach. Es muss nur ein Parameter übergeben werden, nämlich um welche Box es sich dabei handelt (welches dann in dem Array-Namen ausgefüllt wird). Wir öffnen danach ein neues Fenster, mit der Funktion open() des Window-Objekts und speichern dies in der Variable Fenster.

Mit with können mehrere Anweisungen mit einem Objekt ausgeführt werden, in diesem Fall das Dokument das im Fenster angezeigt werden soll. Zuerst wird das Dokument geöffnet, dann wird (wenn das Array-Element worin der HTML-Code steht) nicht leer ist, der Code im Dokument geschrieben, wonach es geschlossen wird.

Der Link um die Funktion auf zu rufen, sieht dann so aus:

<a href="" onClick="zeige('Anmeldefenster'); return false;"> Link Text </a>
In einem Link wird das onClick-Ereignis aufgenommen das die Funktion aufruft und einen Parameter übergibt (nämlich um welche Box es sich handelt). Auch wird mit return false verhindert, dass dann noch der normale Link gefolgt wird (den sollte man einbauen für Besucher die keinen JavaScript-fähigen Browser haben).

Erfahrenere JavaScript'ler können das Script noch nach Bedarf anpassen. Eventuell möchten Sie dann mehrere Parameter an der Funktion übergeben. Deshalb möchte ich Sie noch weisen auf einem anderen Artikel (HIER KLICKEN). So könnten Sie z.B. die Inhalte dynamisch generieren und als zweiten Parameter an der Funktion geben, z.B. so:
<script>
function zeige(welche_box, dynamischer_inhalt)
  {
  var Fenster = window.open();
  with (Fenster.document)
    {
    open();

    if (!box[welche_box]["URL"])
      {
      if (dynamischer_inhalt) {write(dynamischer_inhalt);}
      else {write(box[welche_box]["Inhalt"]);}
      }

    close();
    }
  }
</script>

Arrays Operator Zeichenketten interpretieren Das Window-Objekt


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04511
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06248
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1158
Comments: 0