Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Breite und Höhe des Body abfragen
Frage
Ich habe eine Seite mit einem sehr großen Bild und etwas Text. Das Bild ist so groß, dass ich davon ausgehen kann, dass bei fast allen Usern Scrollbars angezeigt werden. Ich möchte per Script abfragen wie breit und wie hoch der Body beim User ist. Außerdem möchte ich gene wissen wie groß (Höhe und Breite) der Anzeigebereich ist.
Das ganze muss in einer Htmlseite der Variante "Strict" funktionieren. (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Srict//EN">)
Antwort 1 von Dr.Ma-Busen
Moin!
Hiermit müsste es gehn, dass Script liefert dir ein Objekt zurück.
var size = getWinSize();
size.w enthält die Breite
size.h enthält die Höhe
MfG
Dr. Ma-Busen
Hiermit müsste es gehn, dass Script liefert dir ein Objekt zurück.
function getWinSize(win){
if(!win) win = window;
var pos = {x:0,y:0};
if(typeof win.innerWidth != ´undefined´){
pos.w = win.innerWidth;
pos.h = win.innerHeight;
}else if(win.document.body){
pos.w = parseInt(win.document.body.clientWidth);
pos.h = parseInt(win.document.body.clientHeight);
}
return pos;
}var size = getWinSize();
size.w enthält die Breite
size.h enthält die Höhe
MfG
Dr. Ma-Busen
Antwort 2 von Friedel
Danke. Aber so ganz funktioniert es nicht. Im IE speichert size die Größe des Body, wie verlangt. In den Geckobrowsern speichert es die größe des sichtbaren Bereiches. Da alleine das Bild erheblich größer als das Fenster ist, sind die Beiden werte sehr unterschiedlich. In meinem Fall ist es IE size.w=1154 und size.h=1680. In Firefox ist size.w=1019 und size.h=606.
Ich brauche 4 Werte. Höhe und Breite des Anzeigebereiches und Höhe und Breite des Body. Da das Bild sehr groß ist, sollten Höhe und Breite des Body logischerweise größer als die Höhe und Breite des Anzeigebereiches sein.
P.S. Weißt du wie der Debugger vom IE die Zeilen zählt (https://supportnet.de/threads/993049). Ich hab bestimmt 15 Minuten gebraucht, bevor ich den Fehler in deinem Script gefunden hatte. Das SN-Script ersetzt ja einfache Anführungszeichen durch Akzente.
Ich brauche 4 Werte. Höhe und Breite des Anzeigebereiches und Höhe und Breite des Body. Da das Bild sehr groß ist, sollten Höhe und Breite des Body logischerweise größer als die Höhe und Breite des Anzeigebereiches sein.
P.S. Weißt du wie der Debugger vom IE die Zeilen zählt (https://supportnet.de/threads/993049). Ich hab bestimmt 15 Minuten gebraucht, bevor ich den Fehler in deinem Script gefunden hatte. Das SN-Script ersetzt ja einfache Anführungszeichen durch Akzente.
Antwort 3 von Dr.Ma-Busen
Das Script ermittelt bei allen Browsern die größe des Anzeigebereiches des Browsers.
Wenn du jetzt noch die größe des Body haben willst dann kannst du mit clientHeight und clientWidth die größe des Bodys ermitteln.
Funktioniert aber nur in den Geckobrowsern IE und Opera geben die größe des Anzeigebereiches zurück. Was aber beim IE im grunde egal ist, da der IE den Body so groß macht wie den Anzeigebereich des Browsers.
WIe du die größe des Body jetzt in allen Browsern ermitteln kannst weiß ich jetzt auch nicht, aber du kannst mal versuchen den ganzen inhalt der Seite in einen DIV zu packen und von den dann die größe ermitteln.
Und wie der Debuuger vom IE die Zeilen zählt habe ich auch noch nicht ganz verstanden. Am besten du machst dir mal eine kleines Script und baust dort Fehler ein und schaust was dir der Debugger ausgibt.
Wenn du jetzt noch die größe des Body haben willst dann kannst du mit clientHeight und clientWidth die größe des Bodys ermitteln.
Funktioniert aber nur in den Geckobrowsern IE und Opera geben die größe des Anzeigebereiches zurück. Was aber beim IE im grunde egal ist, da der IE den Body so groß macht wie den Anzeigebereich des Browsers.
WIe du die größe des Body jetzt in allen Browsern ermitteln kannst weiß ich jetzt auch nicht, aber du kannst mal versuchen den ganzen inhalt der Seite in einen DIV zu packen und von den dann die größe ermitteln.
Und wie der Debuuger vom IE die Zeilen zählt habe ich auch noch nicht ganz verstanden. Am besten du machst dir mal eine kleines Script und baust dort Fehler ein und schaust was dir der Debugger ausgibt.
Antwort 4 von Friedel
Offensichtlich meinen wir mit "Anzeigebereich" nicht das gleiche. Ich meine damit die innere Fenstergröße des Browsers. Dein Script ermittelt diese Größe, wenn die Bedingung
Mal sehen, ob das mit dem Div klappt. Damit müsste ich ja die Größe des Body (hoffentlich) für alle Browser erfassen können, zumindest wenn ich fafür sorge, dass es gleich breite Ränder gibt. Aber für die Größe des Anzeigebereichs in den Nicht-IE-Browsern fehlt mir noch eine Idee, wobei ich vermute, dass clientWidth und clientHeight auch in Opera funzt.
Zitat:
typeof win.innerWidth != ´undefined´
erfüllt ist. Das ist beim IE nicht der Fall. Dort ermittelt dein Script typeof win.innerWidth != ´undefined´
Zitat:
win.document.body.clientWidth
, was der Größe des Body entspricht.win.document.body.clientWidth
Mal sehen, ob das mit dem Div klappt. Damit müsste ich ja die Größe des Body (hoffentlich) für alle Browser erfassen können, zumindest wenn ich fafür sorge, dass es gleich breite Ränder gibt. Aber für die Größe des Anzeigebereichs in den Nicht-IE-Browsern fehlt mir noch eine Idee, wobei ich vermute, dass clientWidth und clientHeight auch in Opera funzt.
Antwort 5 von Dr.Ma-Busen
Zitat:
...Das ist beim IE nicht der Fall. Dort ermittelt dein Script
"win.document.body.clientWidth"
, was der Größe des Body entspricht.
...Das ist beim IE nicht der Fall. Dort ermittelt dein Script
"win.document.body.clientWidth"
, was der Größe des Body entspricht.
Richtig. Aber der Body im IE hat die selbe größe wie innere Fenstergröße des IE.
Erweitere mal den Body mit style="border: 5px solid red" dann siehst du wo in den einzelnen Browsern der Body ist.
Antwort 6 von Friedel
Habe ich gemacht. Und es ist so wie ich auch vorher dachte. Die Größe des Anzeigebereiches hat (auch) im IE nichts mit der Größe des Body zu tun. Allerdings habe ich dadurch festgestellt, dass die Sache noch etwas komplizierter wird. Im IE 5 ist es nämlich doch so, wie du sagst. Aber nicht im IE6. Was ich bisher über das Verhalten des IE geschrieben habe, hat sich alles auf IE6 bezogen. Sie Seite sollte aber mindestens ab IE 5.01 funktionieren.
Antwort 7 von vasquez
also um mich mal an der discusion zu beteiligen
erstmal paar fragen:
mit anzeigebereich ist da der abstand von der
linken begrenzung des fensters zur rechten begrenzung gemeint
oder
die breite und höhe vom body element?
oder
der anzeigebereich vom bild.
eventuell müsstest du die margin oder padding eigenschaft des body
oder wie das heist abfragen und dann
vom clientWidth/Height ausgehend berechnen , je nach browser version ...
eventuell lässt sich auch die left oder top eigenschaft
des body miteinbeziehen.
interessanter wäre allerdings wozu das dann dienen soll , vieleicht lässt sich das auch anders lösen als
über diese methode ?
erstmal paar fragen:
mit anzeigebereich ist da der abstand von der
linken begrenzung des fensters zur rechten begrenzung gemeint
oder
die breite und höhe vom body element?
oder
der anzeigebereich vom bild.
eventuell müsstest du die margin oder padding eigenschaft des body
oder wie das heist abfragen und dann
vom clientWidth/Height ausgehend berechnen , je nach browser version ...
eventuell lässt sich auch die left oder top eigenschaft
des body miteinbeziehen.
interessanter wäre allerdings wozu das dann dienen soll , vieleicht lässt sich das auch anders lösen als
über diese methode ?