Browserfenstergröße oder die Browserfensterposition ändern
Formular zum Testen der Funktionen resizeTo, moveTo und moveBy

Browserfenstergröße oder die Browserfensterposition ändern

Es ist möglich, die Browsergröße und -position mittels JavaScript zu ändern. Hierzu bedarf es der JavaScriptbefehle für
• die Größenänderung: resizeTo(x,y)
• die Positionsänderung: moveTo(x,y) bzw. moveBy(x,y)
wobei x und y für die neuen Maße bzw. die neue Position (von links oben aus gesehen) stehen.

Beispielhaft JavaScript-Befehle zum Ausmessen/Ansteuern	Vom Browser zurückge- gebener Wert
screen.width
screen.height
screen.availWidth
screen.availHeight
self.outerWidth
self.outerHeight
window.outerWidth
window.outerHeight
top.frames.innerWidth
top.frames.innerHeight
self.innerWidth
self.innerHeight
window.innerWidth
window.innerHeight
top.frames.document.body.offsetWidth
top.frames.document.body.offsetHeight
parent.frames.document.body.offsetWidth
parent.frames.document.body.offsetHeight
self.frames.document.body.offsetWidth
self.frames.document.body.offsetHeight
document.body.offsetWidth
document.body.offsetHeight

Bitte beachten:

Normalerweise interessiert den WebDesigner das Browserinnenmaß, da er die darzustellenden Inhalte entsprechend optimiert. Jedoch wird mittels Resize-Funktion die Fenstergröße verändert - unabhängig von den angezeigten Navigations-/Bedien-Elementen (Suchen, Favoriten, Verlauf, Standard-Schaltflächen, Adressleiste, Links, Radio usw.) - der NN 4.x machte hier noch eine Ausnahme, indem er das Browserinnenmaß ansprach.
Framesets müssen besonders berücksichtigt werden, da z.B. der IE nur über den top.parent.document.body.offsetWidth die Breite des Framesets zurückmeldet, hier aber die Breite des Fensterrahmens nicht mit einrechnet ...
Sollte eine Größenangabe in einer Variablen gespeichert werden, bleibt dieser Wert nach einem resizeTo() natürlich solange gespeichert, bis der Seiteninhalt erneut geladen wurde - daher sollte die Abfrage der Browsermaße mittels einer Funktion erfolgen, um die aktuellen Maße zu erhalten.
Leider: Die JavaScript-Befehle (Version 1.2) .innerWidth / .innerHeight und .outerWidth / .outerHeight interpretiert der IE nicht.
Der IE erwartet zum Ausmessen der Browsermaße mit den Befehlen .body.offsetWidth und .body.offsetHeight ein vorhandes <body>-Element. Eine Abfrage ist also erst nach dem Laden der Seite möglich!
Bug or feature 1 ?: Beim IE kann das resizeTo() innerhalb eines Framesets kann auch auf ein Frame angewandt werden: Allerdings werden dann die Scrollbars teilweise nach dem Resize nicht mehr angezeigt und die »Seitengröße« des Frames in der Breite bzw. Höhe über den tatsächlichen Rand hinaus (quasi virtuell) festgelegt.
Bug or feature 2 ?: Die JavaScript-Engine des NN verhindert, dass das Fenster über den sichtbaren Bereich des Bildschirms hinaus verschoben bzw. in der Größe gestreckt wird, beim IE lässt sich das Fenster beliebig manipulieren.
Bug: Vorsicht ist geboten beim NN 4.x wegen des Resize-Bugs (u.U. Programmabsturz).
Eine Lösung zum Auslesen der aktuellen Fensterposition ist mir nicht bekannt.

Formular zum Testen der Funktionen resizeTo, moveTo und moveBy

Das nachfolgende Formular sollen einen Eindruck vermitteln, was mit den Funktionen möglich ist. Das Ergebnis ist allerdings nicht punktgenau - dies ist bitte zu beachten.

Browsergröße (Fensteraußenmaß)		Browserzielposition fest (moveTo) \|\| relativ (moveBy)
Neue Breite:	Korrektur:	Position von links:	Korrektur:
neue Höhe:	Korrektur:	Position von oben:	Korrektur:

	Position in der html-Datei: body-Bereich
<script type="text/javascript"> <!-- // (c) Guenther Schleu 2002. nsc = (navigator.appName.indexOf('Netscape') != -1); v4 = (parseInt(navigator.appVersion.indexOf('4.')) != -1) v6 = (parseInt(navigator.appVersion.indexOf('6.')) != -1) ie = (navigator.appName.indexOf('Microsoft') != -1); function mass() { with(document.size) { if(nsc) { soW = self.outerWidth; soH = self.outerHeight; siW = self.innerWidth; siH = self.innerHeight; skW = soW-siW; skH = soH-siH; breitek.disabled = true; hoehek.disabled = true; } if(ie) { tfdbow = ((self == top) ? document.body.offsetWidth : top.frames.document.body.offsetWidth); tfdboh = ((self == top) ? document.body.offsetHeight : top.frames.document.body.offsetHeight); } sW = screen.width; sH = screen.height; saW = screen.availWidth; saH = screen.availHeight; Ibreite = ((self == top) ? 828 : 1108); Ihoehe = saH; } } function aktuall() { with(document.size) { if(nsc) { breitek.value = ""; hoehek.value = ""; breite.value = soW hoehe.value = soH; } if(ie) { iebreite = ((self == top) ? document.body.offsetWidth : parent.frames.document.body.offsetWidth); iehoehe = ((self == top) ? document.body.offsetHeight : parent.frames.document.body.offsetHeight); if(self==top) { resizeTo(screen.availWidth,screen.availHeight); } if (self != top) { parent.window.resizeTo(screen.availWidth,screen.availHeight); } iewidth = ((self == top) ? document.body.offsetWidth : parent.frames.document.body.offsetWidth); ieheight = ((self == top) ? document.body.offsetHeight : parent.frames.document.body.offsetHeight); iew = screen.availWidth - iewidth; ieh = screen.availHeight - ieheight; if(self==top) { resizeTo(iebreite+iew,iehoehe+ieh); } if (self != top) { parent.window.resizeTo(iebreite+iew,iehoehe+ieh); } breite.value = tfdbow; hoehe.value = tfdboh; } } } function bzp() { with(document.size) { if(fest[0].checked) { idealb.disabled = false; } if(fest[1].checked) { idealb.disabled = true; } } } function sizeb() { with(document.size) { if(Number(breite.value)+Number(breitek.value) > saW) { breite.value = saW; breitek.value = ""; } if(Number(hoehe.value)+Number(hoehek.value) > saH) { hoehe.value = saH; hoehek.value = ""; } sbb = Number(breite.value)+Number(breitek.value); sbh = Number(hoehe.value)+Number(hoehek.value); if (self != top) { parent.window.resizeTo(sbb,sbh); } if (self == top) { resizeTo(sbb,sbh); } } } // resizeTo() - Selectdefinitionen function idg() { with(document.size) { if(idealg.options[0].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if(ie) { breitek.disabled = false; hoehek.disabled = false; breitek.value = ""; hoehek.value = ""; } breite.value = ""; hoehe.value = ""; } if(idealg.options[1].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if((nsc)&&(v4)) { breitek.disabled = false; hoehek.disabled = false; breitek.value = -skW; hoehek.value = -skH; } breite.value = saW hoehe.value = saH } if(idealg.options[2].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if((nsc)&&(v4)) { breitek.disabled = false; hoehek.disabled = false; breitek.value = -skW; hoehek.value = -skH; } breite.value = sW hoehe.value = sH } if(idealg.options[3].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if((nsc)&&(v4)) { hoehek.disabled = false; hoehek.value = -skH; } breite.value = Ibreite; hoehe.value = Ihoehe; } if(idealg.options[4].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if((nsc)&&(v4)) { breitek.disabled = false; hoehek.disabled = false; breitek.value = -skW; hoehek.value = -skH; } breite.value = "800"; hoehe.value = "600"; } if(idealg.options[5].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if((nsc)&&(v4)) { breitek.disabled = false; hoehek.disabled = false; breitek.value = -skW; hoehek.value = -skH; } breite.value = "1024"; hoehe.value = "768"; } if(idealg.options[6].selected) { breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if((nsc)&&(v4)) { breitek.disabled = false; hoehek.disabled = false; breitek.value = -skW; hoehek.value = -skH; } breite.value = "1280"; hoehe.value = "1024"; } if(idealg.options[7].selected) { aktuall() breitek.value = ""; hoehek.value = ""; breitek.disabled = true; hoehek.disabled = true; if(ie) { breitek.disabled = false; hoehek.disabled = false; breitek.value = iew; hoehek.value = ieh; } breite.value = ((ie)?(tfdbow):(soW)); hoehe.value = ((ie)?(tfdboh):(soH)); } if(idealg.options[8].selected) { breitek.disabled = false; hoehek.disabled = false; breitek.value = ""; hoehek.value = ""; breite.value = ""; hoehe.value = ""; } } } function posb() { with(document.size) { sbb = Number(links.value)+Number(linksk.value); sbh = Number(oben.value)+Number(obenk.value); if(fest[0].checked) { if (self != top) { parent.window.moveTo(sbb,sbh); } if (self == top) { moveTo(sbb,sbh); } } if(fest[1].checked) { if (self != top) { parent.window.moveBy(sbb,sbh); } if (self == top) { moveBy(sbb,sbh); } } } } // moveTo() / moveBy() - Selectdefinitionen function idb() { with(document.size) { if(ie) { linksk.value = iew; obenk.value = ieh; } lk = linksk.value; ok = obenk.value; mittel = (ie)?((saW-tfdbow)/2):((saW-soW)/2); mitteh = (ie)?((saH-tfdboh)/2):((saH-soH)/2); if(mittel<1)mittel="0" if(mitteh<1)mitteh="0" rechtsl = (ie)?(saW-tfdbow-(lk/2)):(saW-soW); if(idealb.options[0].selected) { linksk.value = ""; obenk.value = ""; links.value = "2"; oben.value = "2"; } if(idealb.options[1].selected) { linksk.value = ""; obenk.value = ""; links.value = "0"; oben.value = "0"; } if(idealb.options[2].selected) { linksk.value = ""; obenk.value = ""; if(ie) { linksk.value = -lk/2; obenk.value = -ok/2; } links.value = mittel; oben.value = mitteh; } if(idealb.options[3].selected) { linksk.value = ""; if(ie) { linksk.value = -lk/2; } obenk.value = ""; links.value = rechtsl; oben.value = "0"; } if(idealb.options[4].selected) { linksk.value = ""; obenk.value = ""; links.value = ""; oben.value = ""; } } } //--> </script>

	Position des Formulars in der html-Datei: body-Bereich, nachfolgend der (x)html-Code
<form name="size" method="post" action=""> <table border="0" cellpadding="2" cellspacing="0" summary="Eingabeformular für Größenänderungen und Positionsänderung" class="a10y"> <tr> <th class="formu" colspan="3"><span class="a10">Browsergröße </span><span class="a8">(Fensteraußenmaß)</span></th> <th class="formu" align="center" rowspan="5"> <script type="text/javascript"> <!-- // (c) Guenther Schleu 2002. function info1() { alert("Die Festma\xDFe - wie z.B. 800x600 - bezieht der NN 4.x auf die Innenma\xDFe des Browsers, der NN 6.x auf die Au\xDFenma\xDFe."); } function info2() { alert("Der IE berechnet die Browserinnenma\xDFe\n- daher die Korrekturfelder\n\nDie Korrekturwerte werden per JavaScript ermittelt und sind notwendig, \num Navigations-/Bedien-Elemente und den Fensterrand zu 'neutralisieren'."); } function infoie() { iebreite = ((self == top) ? document.body.offsetWidth : parent.frames.document.body.offsetWidth); iehoehe = ((self == top) ? document.body.offsetHeight : parent.frames.document.body.offsetHeight); if(self==top) { resizeTo(screen.availWidth,screen.availHeight); } if (self != top) { parent.window.resizeTo(screen.availWidth,screen.availHeight); } iewidth = ((self == top) ? document.body.offsetWidth : parent.frames.document.body.offsetWidth); ieheight = ((self == top) ? document.body.offsetHeight : parent.frames.document.body.offsetHeight); iew = screen.availWidth - iewidth; ieh = screen.availHeight - ieheight; if(self==top) { resizeTo(iebreite+iew,iehoehe+ieh); } if (self != top) { parent.window.resizeTo(iebreite+iew,iehoehe+ieh); } alert('Breitenkorrekturwert = '+iew +'\nH\xF6henkorrekturwert = '+ieh) } if(navigator.appName.indexOf('Netscape') != -1) { document.write('<input type="button" onclick="info1()" value="Korrektur-\nInfo" class="button" /> ') } if(navigator.appName.indexOf('Microsoft') != -1) { document.write('<input type="button" onclick="info2()" value="Korrektur-\n\nInfo" class="button" /> ') document.write('<br /><br />') document.write(' <input type="button" class="button" value="Korrektur-\nwerte f\xFCr\nIE ermitteln" onclick="infoie()" />') } //--> </script> </th> <th class="formu" colspan="3"><span class="a10">Browserzielposition <br /> <input type="radio" onclick="bzp()" name="fest" value="" checked="checked" /> fest (moveTo) \|\| <input type="radio" onclick="bzp()" name="fest" value="" /> relativ (moveBy)</span></th> </tr> <tr> <td class="formu"><span class="a10n">Neue Breite:</span></td> <td><input name="breite" type="text" value="" size="4" class="c9" /></td> <td>Korrektur: <input name="breitek" type="text" value="" size="4" class="c9" /></td> <td class="formu"><span class="a10n">Position von links:</span></td> <td><input name="links" type="text" value="2" size="4" class="c9" /></td> <td>Korrektur: <input name="linksk" type="text" value="" size="4" class="c9" /></td> </tr> <tr> <td class="formu"><span class="a10n">neue Höhe:</span></td> <td><input name="hoehe" type="text" value="" size="4" class="c9" /></td> <td>Korrektur: <input name="hoehek" type="text" value="" size="4" class="c9" /></td> <td class="formu"><span class="a10n">Position von oben:</span></td> <td><input name="oben" type="text" value="2" size="4" class="c9" /></td> <td>Korrektur: <input name="obenk" type="text" value="" size="4" class="c9" /></td> </tr> <tr> <td colspan="3"><select name="idealg" onchange="mass();idg()" onclick="mass();idg()" class="c9"> <option>oder Direktwahl</option> <option>avail-screen</option> <option>Fullscreen</option> <option>Idealgröße</option> <option>800x600</option> <option>1024x768</option> <option>1280x1024</option> <option>Aktuelles Maß</option> <option>freie Eingabe</option> </select></td> <td colspan="3"><select name="idealb" onchange="mass();idb();" onclick="mass();idb();" class="c9"> <option>oder Direktwahl</option> <option>links-oben-bündig</option> <option>mittig</option> <option>rechts-oben-bündig</option> <option>freie Eingabe</option> </select></td> </tr> <tr> <td colspan="3"><input type="button" class="button" onclick="mass();sizeb()" value="resize window" /></td> <td colspan="2"><input type="button" class="button" onclick="mass();posb()" value="positioniere window" /></td> </tr> </table> </form>

Diese Seiten enthalten ähnliche Themen:
Beispiel: Erdbebenfenster
Dropdownmenü zur Browsergrößenänderung mit JavaScript

Weiterführendes: www.teamone.de/selfhtml/ Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten .

Browserfenstergröße oder die Browserfensterposition ändern Formular zum Testen der Funktionen resizeTo, moveTo und moveBy

Browserfenstergröße oder die Browserfensterposition ändern

Formular zum Testen der Funktionen resizeTo, moveTo und moveBy

Browserfenstergröße oder die Browserfensterposition ändern
Formular zum Testen der Funktionen resizeTo, moveTo und moveBy