Frage JS "Fenster" Breite-Höhe vs "Bildschirm" Breite-Höhe?


Ich wundere mich ein wenig, wenn ich diesen Code anschaue:

// Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

...

// Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

Was ist der Unterschied zwischen $(document).height(); und $(window).height();?


6
2018-06-06 17:22


Ursprung


Antworten:


$(document).height ist der innere Bereich des Ansichtsfensters, im Wesentlichen vom unteren Rand der Symbolleiste / URL-Leiste bis zur Statusleiste / unteren Bildlaufleiste / Unterseite des Fensters. Das $(window).height Ruft die gesamte Höhe des Fensters ab, einschließlich der Adressleiste und Bildlaufleisten.


4
2018-06-06 17:27



Window ist das oberste clientseitige Objekt, das das Dokument enthält. Dieses jsFiddle zeigt, dass beide $(window).height() und $(document).height() gib den gleichen Wert zurück: http://jsfiddle.net/jackrugile/5xSuv/

Fenster ist die Größe des Ansichtsfensters und enthält keine der Chrome- oder Browser-Schnittstellen, wenn ich mich nicht irre. Ich glaube, dass die Werte von beiden immer gleich sein werden, es sei denn, Sie verweisen auf etwas wie einen Iframe innerhalb eines Fensters.


11
2018-06-06 17:48



Der jsfiddle-Code von @jackrugile gibt die gleichen Werte für das Dokument und das Fenster zurück, da der jsfiddle-Code in einem iframe ausgeführt wird.

Um die Dinge klarer zu machen, wenn Iframes nicht ausgeführt werden -

  • $ (window) .height () gibt die Höhe des Ansichtsfensterbereichs ohne die Höhe einer der auf der Seite vorhandenen Symbolleisten zurück. Das gleiche kann hier experimentiert werden, indem man eine Firebug - Konsole (wenn firefox) oder eine Google Chrome - Konsole mit F12 - Taste öffnet und $ (window) .height () auslöst, was immer variieren wird, wenn man eine der Symbolleisten aus dem Browser hinzufügt oder entfernt Höhe des Firebug- oder Chrom-Debuggers.
     
    Es wird immer die Höhe Ihres Browserfensters zurückgeben und die Höhe aller Symbolleisten subtrahieren.
     
  • $ (document) .height () gibt die Höhe Ihres Seiteninhalts zurück, wie lange Ihre Seite ist.
    Die Höhe der Symbolleisten oder des Browserfensters (wenn die Größe geändert wird oder nicht) hat keinen Einfluss auf den Wert.
    Bevor ich meine Antwort posten konnte, waren es rund 2407 in Chrome und 2410 in Firefox.

 Hoffe, es hilft und macht die Dinge klarer.


3
2018-06-10 20:42



Bildschirm - Ihr Bildschirm: Der Größenwert ändert sich mit Ihrer Monitorgröße.

screen.availWidth  //There is no screen.height 

Fenster oder Dokument - Das Browser-Fenster (das Browser-Ansichtsfenster, enthält KEINE Symbolleisten und Bildlaufleisten). Ignoriert den unsichtbaren scrollbaren Teil, wenn die Seite scrollbar ist. Verwenden Sie "Fenster" für IE9 und höher, es ist einfach.

window.innerHeight    //IE9, Chrome, Safari, Firefox
document.documentElement(or body).clientHeight    //IE 8,7,6,5

Hinweis: Fenster und Dokument sind nicht identisch. Dokumentobjekt (aus DOM) ist eine Eigenschaft des Window-Objekts (aus BOM). Aber gib die gleiche Größe aus. Von W3Schools möchte ich denken, dass "Window" die Notation für die neuen Browserversionen (IE9, Chrome, Firefox usw.) ist und "Dokument" für IE 8,7,6,5.

http://www.w3schools.com/js/js_window.asp, und auch das oben mit einer einfachen aspx-Seite auf unterschiedlich großen Monitoren getestet.


1
2017-08-19 21:44