Wie kann ich die Vorschau in einem neuen Fenster oder Tab öffnen?
- Einleitung
- Verwendung von HTML und JavaScript
- Öffnen mit JavaScript
- Unterschied zwischen neuem Fenster und neuem Tab
- Sicherheitshinweise
- Zusammenfassung
Einleitung
Oft möchte man, dass eine Vorschau eines Dokuments oder Inhalts in einem neuen Fenster oder Tab geöffnet wird, um den aktuellen Kontext nicht zu verlieren. Dies kann etwa bei Webanwendungen oder Formularen sinnvoll sein, wenn man Inhalte separat anzeigen möchte.
Verwendung von HTML und JavaScript
Das Öffnen in einem neuen Fenster oder Tab wird in HTML üblicherweise mit dem Attribut target="_blank" bei einem Link (<a>-Tag) erreicht. Dieses Attribut sorgt dafür, dass der Link nicht im aktuellen Fenster geladen wird, sondern in einem neuen Tab oder Fenster, je nach Browser- und Benutzereinstellungen.
Beispiel:
<a href="vorschau.html" target="_blank">Vorschau öffnen</a>Dadurch öffnet der Link vorschau.html in einem neuen Tab oder Fenster, falls der Browser dies so handhabt.
Öffnen mit JavaScript
Alternativ kann man JavaScript verwenden, um ein neues Fenster oder Tab gezielt zu öffnen und dabei auch weitere Optionen, wie Fenstergröße oder Eigenschaften, festlegen. Hierzu nutzt man die Funktion window.open().
Ein Beispiel, um die Vorschau in einem neuen Fenster zu öffnen:
function openPreview() { window.open(vorschau.html, _blank, width=800,height=600);}Dieser Code öffnet die Datei vorschau.html in einem neuen Fenster mit der Größe 800x600 Pixel. Der Parameter _blank sorgt dafür, dass es ein neuer Tab oder ein neues Fenster wird.
Die Funktion kann beispielsweise durch einen Button aufgerufen werden:
<button onclick="openPreview()">Vorschau öffnen</button>Unterschied zwischen neuem Fenster und neuem Tab
Ob der Browser ein neues Fenster oder einen neuen Tab öffnet, hängt von den Browsereinstellungen und den Präferenzen des Nutzers ab. Moderne Browser öffnen neue Seiten meistens in einem Tab, es sei denn, der Nutzer hat Fenster bevorzugt eingestellt oder Pop-up-Blocker verhindern das Öffnen von Tabs.
Sicherheitshinweise
Beim Öffnen von Links in neuen Tabs oder Fenstern sollte man aus Sicherheitsgründen zusätzlich das Attribut rel="noopener noreferrer" verwenden, um zu verhindern, dass die neue Seite über das DOM Zugriff auf die ursprüngliche Seite erlangt. Das verbessert die Sicherheit gegen bestimmte Angriffsmöglichkeiten.
Beispiel mit Attributen:
<a href="vorschau.html" target="_blank" rel="noopener noreferrer">Vorschau öffnen</a>Zusammenfassung
Um eine Vorschau in einem neuen Fenster oder Tab anzubieten, nutzt man am einfachsten das HTML-Attribut target="_blank" bei Links. Für mehr Kontrolle über das Verhalten kann man JavaScript-Funktion window.open() verwenden. Dabei sollte man stets Sicherheitsaspekte berücksichtigen und rel="noopener noreferrer" ergänzen.