[JS] Wie kann ich ein neues Fenster (Popup) öffnen?

[Andreas Gaisbauer]

Wie kann ich ein neues Fenster (Popup) öffnen?

Grundsätzlich funktioniert das mit einem Aufruf mit folgendem Schema:

window.open([URL],[TITEL],[OPTIONS]);

Es gibt fast unzählige Möglichkeiten dieses Schema anzuwenden - 2 konkrete Beispiele:

1)

<a href="#" onClick="window.open('http://www.tutorials.de','Tuts','width=300, height=300'); return false";>Link</a>

Anmerkung: Das return false; bewirkt das bei dem Klick auf den Link nicht die unter href angegebene Adresse aufgerufen wird.

2)

<a href="http://www.tutorials.de" onClick="window.open(this.href,'Tuts','width=300, height=300')";>Link</a>

Anmerkung: Hier wird die unter <a href> angegebene Adresse aufgerufen.


Als Optionen kommen folgende Werte in Frage:

dependent  = yes|no
height     = [Pixel]
hotkeys    = yes|no
innerHeight= [Pixel]
innerWidth = [Pixel]
left       = [Pixel]
location   = yes|no
menubar    = yes|no
resizable  = yes|no
screenX    = [Pixel]
screenY    = [Pixel]
scrollbars = yes|no
status     = yes|no
toolbar    = yes|no
top        = [Pixel]
width      = [Pixel]

Wie es mit der jeweiligen Browserkompatiblität aussieht und weiterführende Erklärungen, entnehmt ihr bitte den Links.

Links:
Ausführlich Attributbeschreibung: http://www.selfhtml.net/javascript/objekte/window.htm#open

 

[Sven Mintel]

Re: Wie kann ich ein neues Fenster (Popup) öffnen?

Ergänzend sei hinzugefügt, dass mittlerweile in jedem gebräuchlichen Browser der User einen Teil der Optionen deaktivieren kann.

Dazu gehört im Speziellen das Ausblenden der Statusbar.
Davon betroffen sind auch Methoden, die das Manipulieren existierender Fenster, z.B. Grössen-und Positionsänderung ermöglichen:

resizeBy()
resizeTo()
moveBy()
moveTo()


Dies gilt ebenfalls für das Ändern des Textes der Statusbar.

 

[Gumbo]

Re: Wie kann ich ein neues Fenster (Popup) öffnen?

const _WINDOW_DEFAULT_TARGET = "_blank";
const _WINDOW_DEFAULT_FEATURES = new Array(
	new Array( "width",	undefined ),
	new Array( "height",	undefined ),
	new Array( "location",	"yes" ),
	new Array( "menubar",	"yes" ),
	new Array( "resizable",	"yes" ),
	new Array( "scrollbar",	"yes" ),
	new Array( "status",	"yes" ),
	new Array( "toolbar",	"yes" )
);

function getWindowFeaturesFromArray(array) {
	var output = new String;
	if( !isArray(array) ) {
		return false;
	}
	for(var i=0; i<array.length; i++) {
		if( !isArray(array[i]) || array[i].length != 2 || isUndefined(array[i][1]) ) {
			continue;
		}
		output += array[i][0] + "=" + array[i][1] + ",";
	}
	return output;
}

function rawWindow(url, target, features) {
	if( isUndefined(url) || isNull(url) || !isString(url) ) {
		return false;
	}
	if( isUndefined(features) || isNull(features) || !isString(features) ) {
		features = getWindowFeaturesFromArray(_WINDOW_DEFAULT_FEATURES);
	} else {
		features = getWindowFeaturesFromArray(_WINDOW_DEFAULT_FEATURES) + "," + features;
	}
	if( isUndefined(target) || isNull(target) || !isString(target) ) {
		target = _WINDOW_DEFAULT_TARGET;
	}
	var theWindow = window.open(url, target, features);
	return theWindow;
}

Ein Anwendungsbeispiel:

function linkPopup(src, features) {
	return rawWindow(src.getAttribute("href"), src.getAttribute("target") || "_blank", features);
}

<a href="http://example.net/" onclick="return !linkPopup(this, 'width=800,height=600')">foobar</a>