So bestimmen Sie die Höhe einer JS-Seite. So bestimmen Sie „Bildschirmauflösung“ und „Browserfenstergröße“ in JavaScript und jQuery. Ändern des Seitenscrollens: scrollTo, scrollBy, scrollIntoView
Bei der Entwicklung von Schnittstellen für Websites muss häufig JavaScript verwendet werden. Das ist natürlich schlecht, aber in manchen Situationen ist es einfach unmöglich, alles komplett in CSS umzusetzen.
Der häufigste Bedarf besteht darin, die Breite oder Höhe des Browserfensters für weitere Manipulationen zu bestimmen. Unter dem Schnitt finden Sie alle Informationen zu diesem Thema.
Wo kann das nützlich sein?Ich möchte nicht für alle sprechen, aber das ist für mich praktisch bei der Integration aller Arten von Galerien, Schiebereglern usw. in Textpattern, wo alles in reinem JS geschrieben ist. Dinge, die strikt an JS gebunden sind, sind selten, kommen aber vor, weshalb dieser Hinweis erschien.
Sie können es auf zwei Arten definieren: JS oder jQuery.
Bestimmen der Breite oder Höhe mit reinem JSDies ist die am meisten bevorzugte Methode, da fast jeder moderne Browser über eine JavaScript-Engine verfügt. Sogar mobile Browser haben gelernt, mit JS zu arbeiten.
Natürlich besteht die Möglichkeit, dass der Benutzer selbst die JS-Verarbeitung im Browser deaktiviert, aber meiner Meinung nach gibt es nicht viele solcher „seltsamen Leute“, da fast jede Site eine Lösung verwendet, die auf JS läuft.
Um in JS die Bildschirmgröße zu bestimmen, müssen Sie die folgenden Funktionen verwenden:
Screen.width //Bildschirmbreite screen.height //Bildschirmhöhe
Hier ist ein sinnloses Anwendungsbeispiel:
Alert(screen.width+"x"+screen.height);
Wenn Sie dies verwenden, um einige Elemente auf der Seite zu positionieren, wäre es die beste Lösung, die Abmessungen des Browserfensters anstelle der Bildschirmgrößen zu verwenden. In JS geht das so:
Document.body.clientWidth //Browserbreite document.body.clientHeight //Browserhöhe
Dementsprechend hier ein nichtssagendes Anwendungsbeispiel:
Alert(document.body.clientWidth+"x"+document.body.clientHeight);
Browsergröße mit jQueryPersönlich verwende ich die unten beschriebene Methode. Diese Methode funktioniert nur, wenn Sie zuvor die jQuery-Bibliothek auf Ihrer Site installiert haben. Auf allen Websites, die ich erstellen muss, ist diese Bibliothek ein De-facto-Standard.
Um jQuery für unsere Aufgabe zu verwenden, müssen wir den Code verwenden:
$(window).width(); //Browserbreite $(window).height(); //Browserhöhe
Und am Ende möchte ich sagen: Wenn es möglich ist, ganz oder teilweise auf JS und jQuery zu verzichten, dann ist dies genau das, was Sie tun müssen.
Teilen Sie es in den sozialen Medien Netzwerke
Wofür ist das? Wir haben zum Beispiel ein schönes Website-Layout, das seine ganze Schönheit erst bei einer Auflösung von beispielsweise 1600 x 1200 zeigt. Es hat zum Beispiel einen sehr großen, schönen Header. Was passiert, wenn eine Person die Website mit einer Auflösung von 1024 x 768 besucht? Ja, nur der Hut wird sichtbar sein. Nicht gut? Vielleicht. Warum dann nicht so etwas tun, dass angesichts der Höhe des Browsers/Bildschirms die Kopfzeile einfach abgeschnitten wird und das Menü und der Rest der Website verschwinden? Wow, genau das, was Sie brauchen.
Eigentlich habe ich eines der Beispiele beschrieben, die mir in der Praxis begegnet sind (siehe Bild). Ich habe das Problem einfach gelöst – durch Javascript. Oder vielleicht über jQuery, ich erinnere mich nicht. Ich werde hier beide Methoden beschreiben.
Zunächst muss zwischen den Definitionen von „Bildschirmauflösung“ und „Browserfenstergröße“ unterschieden werden (da es in einigen Artikeln Vorfälle gab – sie kritisierten einige Methoden, schlugen andere vor, obwohl sie in einem Fall die Browserauflösung maßen, im anderen - die Monitorauflösung).
Sie müssen von Anfang an festlegen, was Ihnen wichtiger ist. Im Fall dieses Beispiels mit der Kopfzeile habe ich mich an der Bildschirmauflösung (Monitorauflösung) orientiert: Schließlich ist die Website schön. Wenn das Browserfenster manuell verkleinert wird, können sie ihren Browser beim Betrachten auf den Vollbildmodus erweitern Website (sie haben nichts zu suchen, wissen Sie - Anmerkung der Redaktion). Aber um beispielsweise das erweiterte Bild der jQuery-Lightbox-Galerie anzupassen, habe ich die Breite und Höhe des Browsers verwendet.
Und nachdem wir uns entschieden haben, schreiben wir den Code, vielleicht in den Header der Site. Zunächst ein Beispiel, das sich auf die Bildschirmauflösung konzentriert.
Die Zeilen 3-6 sind reines Javascript, die Zeilen 7-11 sind ein Beispiel in jQuery. Zur Bestimmung der Breite und Höhe werden die Javascript-Methoden screen.width und screen.height verwendet. Was die Zeilen bewirken, ist klar: Das erste Skript gibt den Pfad an zusätzliche Datei CSS, und der andere legt die CSS-Eigenschaft „background-position“ für den Block mit der Kennung total fest.
Schauen wir uns das zweite Beispiel an, das sich jedoch auf die Browserauflösung konzentriert. Alles ist gleich, die Methoden haben sich geändert.
Anhand von zwei Beispielen ein kurzer Überblick darüber, was wofür verwendet werden sollte:
Es ist klar, dass, wenn Sie jQuery verwenden, Option 5 der Option 3 und Option 6 der 4 vorzuziehen ist – sie sind einfach kürzer. Nun, es kommt auf den Geschmack und die Farbe an.
Was die spezifischen Einträge für Bildschirmhöhe und -breite für jQuery angeht, kenne ich sie ehrlich gesagt nicht. Theoretisch sollte es eine Struktur wie 5-6 Zeilen geben, aber irgendwie bin ich in der Praxis nicht darauf gestoßen, es scheint mir, dass es sie nicht gibt. Und das ist nicht notwendig, screen.width ist eine ausreichend kurze Konstruktion, es reicht aus.
Ja, es gibt auch $(document).width() – bestimmt die Breite des HTML-Dokuments. Der praktische Nutzen ist irgendwie zweifelhaft. Wer weiß, ich würde mich freuen, wenn Sie es teilen.
Das ist alles für heute! Lasst uns bis zum Wochenende durchhalten und massenhaft zum Grillen gehen! (Es sei denn, Sie sind an etwas erkrankt, wie z. B. an manchen – Anm. d. Red.). Viel Glück!
Guten Tag! In Fortsetzung des Themas in dieser Lektion werden wir uns mit dem Problem des Scrollens einer Webseite und der Manipulation der Browsergröße befassen. Wie finden Sie die Browserbreite? Wie scrolle ich mit JavaScript durch eine Webseite? Ich denke, dass Sie in dieser Lektion die Antworten auf diese Fragen finden werden.
Nicht window.innerWidth/Height
Es ist zu beachten, dass alle Browser außer IE8 auch die Eigenschaften window.innerWidth/innerHeight unterstützen können. Sie sparen momentane Größe Fenster.
Was ist der Unterschied? Du fragst. Es ist natürlich klein, aber äußerst wichtig.
Wenn eine Bildlaufleiste vorhanden ist, geben die clientWidth/Height-Eigenschaften genau die darin enthaltene Breite/Höhe zurück, die für das gesamte Dokument verfügbar ist, und window.innerWidth/Height ignoriert deren Vorhandensein.
Wenn die rechte Seite der Seite von einer Bildlaufleiste eingenommen wird, werden in diesen Zeilen verschiedene Dinge angezeigt:
Alert(window.innerWidth); // die gesamte Breite des Fensters warning(document.documentElement.clientWidth); // Breite minus Scrollen
Normalerweise interessiert uns nur die verfügbare Breite des Fensters, um beispielsweise etwas zu zeichnen, also abzüglich der Bildlaufleiste. Daher wird häufig documentElement.clientWidth verwendet.
Breite/Höhe einer Webseite unter Berücksichtigung des ScrollensJa, theoretisch ist der sichtbare Teil der Seite documentElement.clientWidth/Height, aber die volle Größe einschließlich der Bildlaufleiste ist analog documentElement.scrollWidth/scrollHeight.
Dies gilt für alle regulären Elemente.
Bei einer Seite mit diesen Eigenschaften kann jedoch ein Problem auftreten, wenn das Scrollen entweder vorhanden ist oder nicht. In diesem Fall funktionieren sie nicht richtig. Es muss gesagt werden, dass in Chrome-Browser/ Safari und Opera: Wenn keine Bildlaufleiste vorhanden ist, kann der Wert von documentElement.scrollHeight in diesem Fall sogar kleiner sein als documentElement.clientHeight, was natürlich wie etwas Unlogisches aussieht
Dieses Problem kann speziell für documentElement auftreten.
Aber Sie können die Seitengröße unter Berücksichtigung des Scrollens zuverlässig bestimmen, indem Sie einfach das Maximum dieser mehreren Eigenschaften nehmen:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alarm("Höhe inklusive Scrollen: " + scrollVisota);
Die aktuelle Schriftrolle abrufenWenn ein reguläres Element über einen aktuellen Scroll verfügt, können Sie diesen in scrollLeft/scrollTop abrufen.
Was ist also mit der Seite?
Der Punkt ist, dass die meisten Browser eine Anfrage an documentElement.scrollLeft/Top korrekt verarbeiten, aber Safari/Chrome/Opera weist Fehler auf, die die Verwendung von document.body erfordern.
Um dieses Problem insgesamt zu umgehen, können Sie die Eigenschaften window.pageXOffset/pageYOffset verwenden:
Alert("Aktueller Bildlauf oben: " + window.pageYOffset); alarm("Aktueller Bildlauf nach links: " + window.pageXOffset);
Dies sind alles Eigenschaften:
- Nicht unterstützt IE8-
- Sie können nur gelesen und nicht geändert werden.
Wenn IE8 keine Rolle spielt, verwenden wir einfach diese Eigenschaften.
Eine browserübergreifende Option unter Berücksichtigung von IE8 bietet eine Option für documentElement:
Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alarm("Aktueller Scroll: " + scrollTop);
Ändern des Seitenscrollens: scrollTo, scrollBy, scrollIntoViewUm eine Seite mit JavaScript zu scrollen, müssen alle ihre Elemente vollständig geladen sein.
Bei regulären Elementen kann scrollTop/scrollLeft grundsätzlich geändert werden und das Element scrollt.
Niemand hindert Sie daran, dasselbe mit der Seite zu tun. In allen Browsern außer Chrome/Safari/Opera können Sie scrollen, indem Sie einfach document.documentElement.scrollTop festlegen. In diesen Browsern sollten Sie hierfür document.body.scrollTop verwenden. Und alles wird großartig funktionieren.
Aber es gibt noch eine andere, universelle Lösung – spezielle Seiten-Scroll-Methoden window.scrollBy(x,y) und window.scrollTo(pageX,pageY).
- Die scrollBy(x,y)-Methode scrollt die Seite relativ zu ihren aktuellen Koordinaten.
- Die scrollTo(pageX,pageY)-Methode scrollt die Seite relativ zum gesamten Dokument zu den angegebenen Koordinaten. Dies entspricht dem Festlegen der scrollLeft/scrollTop-Eigenschaften. Um zum Anfang des Dokuments zu scrollen, müssen Sie lediglich die Koordinaten (0,0) angeben.
Die Methode elem.scrollIntoView(top) muss für das Element aufgerufen werden und scrollt die Seite so, dass sich das Element oben befindet, wenn top „true“ ist, und unten, wenn top „false“ ist. Wenn dieser oberste Parameter nicht angegeben wird, ist er außerdem gleich „true“.
Anti-ScrollEs gibt Situationen, in denen es notwendig ist, ein Dokument „nicht scrollbar“ zu machen. Zeigen Sie beispielsweise ein großes Dialogfeld über einem Dokument an, sodass der Besucher durch das Dialogfeld scrollen kann, nicht jedoch durch das Dokument selbst.
Um das Scrollen der Seite zu verhindern, legen Sie einfach die Eigenschaft document.body.style.overflow = „hidden“ fest.
Anstelle von document.body kann es ein beliebiges Element geben, dessen Scrollen deaktiviert werden muss.
Der Nachteil dieser Methode besteht jedoch darin, dass die Bildlaufleiste selbst verschwindet. Wenn es eine bestimmte Breite einnimmt, wird diese Breite nun freigegeben und der Inhalt der Seite wird erweitert, der Text „springt“ und nimmt den gesamten freien Platz ein.
Ergebnisse- Um die Abmessungen des sichtbaren Teils des Fensters zu erhalten, verwenden Sie die Eigenschaft: document.documentElement.clientWidth/Height
- Um Seitenabmessungen unter Berücksichtigung des Scrollens zu erhalten, verwenden Sie: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement .clientHeight);
In dieser Lektion betrachten wir die Eigenschaften des Fensterobjekts, mit denen Sie die Abmessungen des Arbeitsbereichs des Browserfensters (innerWidth und innerHeight), die Abmessungen des Fensters selbst (outerWidth und äußereHeight) ermitteln können. seine Position relativ zur oberen linken Ecke des Bildschirms des Benutzers (screenLeft und screenTop) und die Position des Bildlaufs (pageXOffset und pageYOffset).
innerWidth- und innerHeight-EigenschaftenSie dienen dazu, die Abmessungen des sichtbaren Arbeitsbereichs des Browserfensters zu ermitteln. Diese. Die Eigenschaften innerWidth und innerHeight sollen die Breite und Höhe des Bereichs ermitteln, in dem das HTML-Dokument angezeigt wird. Diese Eigenschaften sind schreibgeschützt und geben Pixelwerte zurück.
Ermitteln Sie beispielsweise die Höhe und Breite des sichtbaren Arbeitsbereichs des Browserfensters:
Breite des sichtbaren Anzeigebereichs (widthContenArea):
Breite des sichtbaren Anzeigebereichs (heightContenArea):
// Breite des sichtbaren Ansichtsfensters (für alle Browser außer Internet Explorer 8) var widthContenArea = window.innerWidth; // Höhe des sichtbaren Ansichtsfensters (für alle Browser außer Internet Explorer 8) var heightContenArea = window.innerHeight; // Breite des sichtbaren Ansichtsfensters (für Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // Höhe des sichtbaren Ansichtsfensters (für Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // Breite des sichtbaren Ansichtsfensters (für alle Browser) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // Höhe des sichtbaren Ansichtsfensters (für alle Browser) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea; OuterWidth- und OuterHeight-EigenschaftenSie sind so konzipiert, dass sie die Abmessungen des gesamten Browserfensters ermitteln, d. h. einschließlich Symbolleisten, Bildlaufleisten, Statusleiste, Fensterränder usw. Die Eigenschaften „outerWidth“ und „outerHeight“ sind schreibgeschützt und geben die Breite und Höhe des Fensters in Pixel zurück.
Ermitteln Sie beispielsweise die Höhe und Breite des Browserfensters:
Breite des Browserfensters (widthWindow):
Höhe des Browserfensters (heighWindow):
// Breite des Browserfensters var widthWindow = window.outerWidth; // Höhe des Browserfensters var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow; screenLeft (screenX) und screenTop (screenY) EigenschaftenSie dienen dazu, die Koordinaten der oberen linken Ecke des Browserfensters oder Dokuments relativ zur oberen linken Ecke des Benutzerbildschirms zu ermitteln.
In diesem Fall funktionieren die Eigenschaften screenLeft und screenTop im Internet Explorer und die Eigenschaften screenX und screenY in Mozilia Firefox. In Chrome, Safari und anderen ähnlichen Browsern können Sie sowohl die Eigenschaften screenLeft und screenTop als auch die Eigenschaften screenX und screenY verwenden.
Bei der Verwendung dieser Eigenschaften müssen Sie berücksichtigen, dass einige Browser möglicherweise die Koordinaten der oberen linken Ecke des Dokuments und einige Browser möglicherweise die Koordinaten der oberen linken Ecke des Fensters zurückgeben. Die Eigenschaften screenleft (screenX) und screenTop (screenY) sind schreibgeschützt und geben die horizontalen und vertikalen Abstände relativ zur linken Ecke des Bildschirms in Pixel zurück.
Lassen Sie uns beispielsweise in Form einer Nachricht die x- und y-Koordinaten der linken Ecke des aktuellen Browserfensters (Dokuments) relativ zur oberen linken Ecke des Bildschirms anzeigen:
function windowXY() ( // Mithilfe der Eigenschaften screenleft und screenTop erhalten wir die Koordinaten der Position des Fensters (Dokuments) var winX = window.screenLeft; var winY = window.screenTop; // Mithilfe der Eigenschaften screenX und screenY erhalten wir die Koordinaten der Position des Fensters (Dokuments) winX = window.screenX; winY = window.screenY; // Ermitteln Sie die Koordinaten der Position des Fensters (Dokuments) in allen Browsern winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Fensterkoordinaten relativ zum Bildschirm des Benutzers: X = " + winX + ", Y = " + winY + "."); ) Finden Sie heraus Koordinaten
Sie sollen die Anzahl der Pixel ermitteln, um die das Dokument in horizontaler (pageXOffset) oder vertikaler (pageYOffset) Richtung relativ zur oberen linken Ecke des Fensters gescrollt wurde. Die Eigenschaften scrollX und scrollY entsprechen den Eigenschaften pageXOffset bzw. pageYOffset. Diese Eigenschaften sind schreibgeschützt.
Zeigen Sie beispielsweise in einer Nachricht die Anzahl der Pixel an, um die das Dokument in horizontaler (pageXOffset) und vertikaler (pageYOffset) Richtung gescrollt wurde.
function scrollContent() ( //Das aktuelle Dokument um 200 Pixel nach rechts und unten scrollen window.scrollBy(200,200); //Werte mithilfe der Eigenschaften pageXOffset und pageYOffset abrufen var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Erhalten Sie die Werte, um die das Dokument horizontal oder vertikal gescrollt wurde, für Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Für alle Browser: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alarm ("Anzahl der Pixel, um die das Dokument horizontal und vertikal gescrollt wurde: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Finden Sie die Positionen der Bildlaufleisten heraus
