JavaScript/Objekte/window

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das aktuelle Fenster des Web-Browsers können Sie über die Objekte window oder self ansprechen. Auf die Objekte window und self lassen sich alle Eigenschaften und Methoden des window-Objekts anwenden.

  • document bezieht sich auf den Inhalt, der in einem Browser-Fenster angezeigt wird. Mit ihm ist auch der Zugriff auf alle HTML-Elemente möglich.
  • event: Einzelinformationen zu Anwenderereignissen wie Mausklicks oder Tasteneingaben ermitteln und weiterverarbeiten.
  • history: bietet (eingeschränkten) Zugriff auf die besuchten WWW-Seiten des Anwenders.
  • location: Zugriff auf den vollständigen URI der aktuell angezeigten Web-Seite.

[Bearbeiten] Unterseiten

Eigenschaften

Methoden

[Bearbeiten] Allgemeines

function FensterOeffnen (Adresse) { MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=400,left=100,top=200"); MeinFenster.document.write("<p>ein neues Fenster!<br>(Besser wäre aber eine dialog-Box!)</p>"); MeinFenster.focus(); }

Die Beispieldatei enthält einen Verweis. Beim Anklicken dieses Verweises wird die JavaScript-Funktion FensterOeffnen() aufgerufen. Diese Funktion öffnet ein neues, kleines Browser-Fenster und zeigt darin die Datei datei2.htm an. Eine genauere Erklärung sowie weitere Einzelheiten zum Öffnen neuer Fenster werden bei der Methode open() beschrieben. Ein solches Fenster ist nach dem Erzeugen mit der Variablen ansprechbar, in der die Fensterinstanz gespeichert ist. Im Beispiel ist das die Variable MeinFenster.

Über diesen Instanznamen können Sie alle Eigenschaften und Methoden des erzeugten Fensters ansprechen.

Beispiel
<a href="javascript:MeinFenster.close()">Fenster zumachen</a>

Im Beispiel wird das zuvor geöffnete Fenster beim Klicken auf den Verweis wieder geschlossen. Zuständig dafür ist die Methode close(). Das Fenster wird dabei mit seinem Instanznamen angesprochen, im Beispiel also mit dem Namen der Variablen MeinFenster, mit der es zuvor erzeugt wurde.

Bei der Variablen MeinFenster handelt es sich um eine globale Variable. Diese wurde erzeugt durch eine Deklaration der Variablen ohne das Schlüsselwort var. Die Deklaration als globale Variable ermöglicht es Ihnen, dieses Fenster auch außerhalb der erzeugenden Funktion anzusprechen.

Genau so, wie Sie vom Hauptfenster auf ein mit open() erzeugtes Zweitfenster zugreifen können, können Sie aus einem solchen Zweitfenster auf das Hauptfenster zugreifen. Dazu gibt es das Fensterobjekt opener. Damit wird das Fenster angesprochen, von dem aus das aktuelle Fenster geöffnet wurde.


Über das Objekt opener können Sie alle Eigenschaften und Methoden des öffnenden Fensters ansprechen.

Beispiel
<a href="javascript:opener.close()">Hauptfenster zumachen</a>

Notieren Sie nach opener einen Punkt und danach die gewünschte Methode oder Eigenschaft.

[Bearbeiten] Popup-Boxen

Das windows-Objekt und seine Methoden wurden früher zur Erzeugung weiterer Fenster gebraucht. Diese nannte man Popup-Boxen, wenn sie vor dem aktuellen Fenster erschienen, bzw. Popunder, die sich unsichtbar hinter dem Fenster befanden.[1]


[Bearbeiten] Nachteile

Die Darstellung heutiger Browser hat sich gegenüber der Anfangszeit des Internets stark verändert. Anstelle einer Vielzahl von offenen Fenstern werden verschiedene Seiten innerhalb eines Fensters als Registerkarten (Tabs) angezeigt. Diese Tabs haben immer die Größes des Browserfensters. Deshalb ist das klassische Popup mit vom Seitenautor festgelegter Größe, Position und Leistenkonfiguration mit tabbed browsing und dem Konzept moderner Browser nicht vereinbar.

Popup-Boxen hatten eine feste Größe, die unabhängig vom verfügbaren Viewport war und widersprechen so dem Konzept des responsiven Designs. [2]

Im heutigen Web soll der Benutzer selber entscheiden, ob er Links im selben Tab, in einem neuen Tab oder einem neuen Fenster öffnet. Wenn er im selben Tab bleibt, ist der Zurück-Button die bequemste Möglichkeit zu einer Seite zurückzukehren. Mehrere offene Fenster und Popup-Boxen verhindern dieses intuitive Bedienkonzept.

Heutzutage unterbinden moderne Browser oft das Öffnen neuer Fenster und machen so den Einsatz von Popups obsolet.

[Bearbeiten] Alternativen

Heute sind Popups aus den oben genannten Gründen fast völlig von den Webseiten verschwunden. Es gibt jedoch einige Alternativen, die ohne die Nachteile mehrerer Fenster auskommen.

Heutzutage werden Popups oft nicht mehr als neues Fenster, sondern als dokumentinterne Dialogfenster realisiert. Sie bleiben Bestandteil der Seite. Um eine Benutzerinterkation zu betonen, öffnet sich ein modaler Dialog als Overlay in einer Ebene (layer), die über dem normalen Inhalt liegt. Dies blockiert in der Regel weitere Interaktion mit der dahinter liegenden Seite, und blendet sie auch visuell mehr oder weniger stark aus.

[Bearbeiten] Inline-Popups

Dies kann man mit einem einfachen JavaScript-Script erreichen, das mithilfe von className ein Inline-Popup im aktuellen Fenster öffnet. Durch einen Klick auf den Schließen-Button verschwindet es wieder.

Mit Lightbox-Scripten können Sie beliebige Inhalte in einer Ebene (layer) darstellen, die über dem normalen Inhalt liegt. Die eigentliche Seite wird ausgegraut. Sobald Sie durch einen Klick auf die eigentliche Seite oder einen Schließen-Button zum Hauptinhalt zurückkehren, wird der zusätzliche Layer wieder ausgeblendet. Auf ein neues Browserfenster wird gänzlich verzichtet.

[Bearbeiten] Dialog-Box

Mit dem Dialog-Element können sie mit wenig HTML-Markup eine Dialog-Box anlegen, die per JavasCript oder CSS ein- und ausgeblendet werden kann.

[Bearbeiten] Nachladen von Inhalten mit AJAX

Ajax (Asynchronus JavaScript and Xml) ist ein Konzept, das es Webanwendungen ermöglicht, Daten zum und vom Server zu übertragen, ohne dass die Seite als Ganzes neu geladen wird.

[Bearbeiten] Animationen

Auch wenn es lange verpönt war Webseiten zu animieren, spielen Animationen doch eine große Rolle.[3] Mittels CSS3 können Darstellungen durch :hover-Effekte und transitions verbessert werden. Mit @keyframes können Sie einzelne Schritte einer CSS-Animationssequenz festlegen.

Trotzdem ist es oft schneller und übersichtlicher Animationen mit JavaScript zu steuern. requestAnimationFrame ermöglicht es, Funktionen, ähnlich wie mit setTimeout zeitlich verzögert ausgeführt werden, bitet aber einige Vorteile, da es CPU-schonend und batteriesparend pausiert, wenn Tabs inaktiv sind.[4]

In Zukunft wird eventuell die Web Animations API mit element.animate die verschiedenen Möglichkeiten Webseiten zu animieren zusammenfassen.[5] Lassen wir uns überraschen!


[Bearbeiten] Quellen

  1. http://molily.de/javascript-popups#nachteile
  2. http://forum.de.selfhtml.org/archiv/2005/12/t119707/#m768289
  3. http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/
  4. http://aerotwist.com/blog/flip-your-animations/
  5. http://css-tricks.com/things-chrome-dev-summit-2014/
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke