21 Mar
2006

Fensterhöhe und Fensterbreite im Internet Explorer und Co.

 

Wenn man mit DHTML arbeitet da kommt man schonmal in "Versuchung" via Javascript etwas an der Fensterhöhe und Fensterbreite ausrichten zu wollen, dazu bietet z.B. der Firefox window.innerWidht und window.innerHeight] an. Sehr praktisch, leider hat der Internet Explorer sowas nettes nicht. Wenn man sich nun via Google auf die Suche beginnt erhält man wieder und wieder den Hinweis auf document.body.offsetWidth und document.body.offsetHeight, dies soll dann die gewünschte Information beeinhalten. Leider stimmt dies nicht so ganz, man erhält halt die Höhe und Breite vom BODY-Tag. Und dies kann sowohl kleiner als auch größer wie dass Fenster sein. Also irgendwie nicht wirklich zu gebrauchen. Also in die tiefen des DOM Modells abgestiegen und geschaut ob man nicht was passenderes findet (das Javascript Debugging im VS2005 ist wirklich nett), und siehe da. Es gibt die gewünschte Information. Sucht man danach findet man genug darüber :) document.documentElement.clientWidth und document.documentElement.clientHeight. So, hier nun zwei Funktionen die einem das bestmögliche Ergebnis zurückzuliefern. Für die Nachwelt zur freien Verwendung.

function getWindowWidth(win) { 
	if (win == undefined) win = window; 
	if (win.innerWidth) { 
		return win.innerWidth; 
	} 
	else { 
		if (win.document.documentElement && 
			win.document.documentElement.clientWidth) { 
			return win.document.documentElement.clientWidth; 
		} 
		return win.document.body.offsetWidth; 
	} 
} 

function getWindowHeight(win) { 
	if (win == undefined) win = window; 
	if (win.innerHeight) { 
		return win.innerHeight; 
	} 
	else { 
		if (win.document.documentElement 
			&& win.document.documentElement.clientHeight) { 
			return win.document.documentElement.clientHeight; 
		} 
		return win.document.body.offsetHeight; 
	} 
}

Die Anwendung ist denkbar einfach

var width = getWindowWidth(); 
var height = getWindowHeight();

Wenn man möchte kann man den Funktionen noch ein bestimmtes Fenster übergeben, ansonsten wird das aktuelle genommen.


Der Eintrag ist mir etwas Wert
 

Feedback

# re: Fensterhöhe und Fensterbreite im Internet Explorer und Co.

left by j.j. at 4/3/2008 5:16 AM Gravatar
Hallo!
Ich habe den Code mal vereinfacht:<p>
var breite= window.innerWidth || document.documentElement.clientWidth;<p>
var hoehe= window.innerHeight || document.documentElement.clientHeight;
<p>
j.j.

# re: Fensterhöhe und Fensterbreite im Internet Explorer und Co.

left by Valentin at 5/25/2009 10:37 PM Gravatar
document.documentElement.clientWidth und document.documentElement.clientHeight geben in Safari nur die Höhe des Body-Tags an!
Comments have been closed on this topic.