În această lecție, ne vom uita la proprietățile obiectului fereastră, cu ajutorul cărora puteți obține dimensiunile zonei client a ferestrei browserului (innerWidth și innerHeight), dimensiunile ferestrei în sine (outerWidth și outerHeight), poziția acesteia în raport cu colțul din stânga sus al ecranului utilizatorului (screenLeft și screenTop) și poziționează barele de defilare (pageXOffset și pageYOffset).
proprietățile innerWidth și innerHeight
Ele sunt concepute pentru a obține dimensiunile zonei client vizibile a ferestrei browserului. Acestea. proprietățile innerWidth și innerHeight sunt pentru obținerea lățimii și înălțimii zonei în care este afișat documentul HTML. Aceste proprietăți sunt numai pentru citire și returnează valori de pixeli.
De exemplu, pentru a obține înălțimea și lățimea zonei client vizibile a ferestrei browserului:
Lățimea ferestrei (widthContenArea):
Lățimea ferestrei vizibile (heightContenArea):
proprietățile outerWidth și outerHeight
Acestea sunt concepute pentru a obține dimensiunile întregii ferestre de browser, de exemplu. inclusiv bare de instrumente, bare de defilare, bară de stare, margini de fereastră etc. Proprietățile outerWidth și outerHeight sunt numai pentru citire și returnează lățimea și, respectiv, înălțimea ferestrei în pixeli.
De exemplu, pentru a obține înălțimea și lățimea ferestrei browserului:
Lățimea ferestrei browserului (widthWindow):
Înălțimea ferestrei browserului (heightWindow):
Proprietăți screenLeft (screenX) și screenTop (screenY).
Acestea sunt concepute pentru a obține coordonatele colțului din stânga sus al ferestrei browserului sau al documentului în raport cu colțul din stânga sus al ecranului utilizatorului.
Cu toate acestea, proprietățile screenLeft și screenTop funcționează în Internet Explorer, iar proprietățile screenX și screenY funcționează în Mozilia Firefox. ÎN Browsere Chrome, Safari și browsere similare, puteți utiliza atât proprietățile screenLeft și screenTop, cât și proprietățile screenX și screenY.
Când utilizați aceste proprietăți, trebuie să țineți cont de faptul că unele browsere pot returna coordonatele colțului din stânga sus al documentului, iar unele browsere coordonatele colțului din stânga sus al ferestrei. Proprietățile screenleft (screenX) și screenTop (screenY) sunt numai pentru citire și returnează distanța orizontală și respectiv verticală din colțul din stânga ecranului în pixeli.
De exemplu, să afișăm coordonatele x și y din colțul din stânga ferestrei curente a browserului (documentul) în raport cu colțul din stânga sus al ecranului ca mesaj:
Aflați coordonatele
Proprietăți pageXOffset (scrollX) și pageYOffset (scrollX).
Acestea sunt concepute pentru a obține numărul de pixeli pe care documentul i-a derulat orizontal (pageXOffset) sau vertical (pageYOffset) în raport cu colțul din stânga sus al ferestrei. Proprietățile scrollX și scrollY sunt echivalente cu proprietățile pageXOffset și, respectiv, pageYOffset. Aceste proprietăți sunt doar pentru citire.
De exemplu, afișați în mesaj numărul de pixeli cu care documentul a fost derulat în direcția orizontală (pageXOffset) și verticală (pageYOffset).
Verificați pozițiile barei de derulare
Salut! În continuarea subiectului din această lecție, vom lua în considerare o astfel de problemă precum derularea unei pagini web și manipularea dimensiunii browserului. Cum puteți găsi lățimea browserului? Cum să parcurgeți o pagină web folosind JavaScript? Cred că veți găsi răspunsuri la aceste întrebări în această lecție.
Lățimea/înălțimea părții vizibile a ferestrei browserului
Proprietățile clientWidth/Height pentru un element sunt doar lățimea/înălțimea zonei vizibile a ferestrei.
Nu window.innerWidth/Height
Trebuie remarcat faptul că toate browserele, cu excepția IE8-, pot suporta și proprietățile window.innerWidth/innerHeight. Ei păstrează dimensiunea actuală a ferestrei.
Care este diferența? Tu intrebi. Este cu siguranță mic, dar extrem de important.
Proprietățile clientWidth/Height, dacă există o bară de derulare, vor returna exact lățimea/înălțimea din interiorul acesteia, disponibile pentru întregul document, iar window.innerWidth/Height va ignora prezența acesteia.
Dacă partea dreaptă a paginii este ocupată de o bară de defilare, atunci aceste linii vor afișa diferite lucruri:
Alert(window.innerWidth); // alertă de lățime completă a ferestrei (document.documentElement.clientWidth); // lățimea minus scroll
De obicei, ne interesează doar lățimea disponibilă a ferestrei, de exemplu, să desenăm ceva, adică minus bara de defilare. Prin urmare, documentElement.clientWidth este adesea folosit.
Lățimea/înălțimea paginii web, inclusiv derularea
Da, teoretic, partea vizibilă a paginii este documentElement.clientWidth/Height, dar dimensiunea completă, inclusiv bara de defilare, este, prin analogie, documentElement.scrollWidth/scrollHeight.
Acest lucru este valabil pentru toate elementele obișnuite.
Dar pentru o pagină cu aceste proprietăți, poate apărea o problemă atunci când derularea este acolo sau nu. În acest caz, ele nu funcționează corect. Trebuie să spun că în browserele Chrome/Safari și Opera, în lipsa unei bare de defilare, valoarea documentElement.scrollHeight în acest caz poate fi chiar mai mică decât documentElement.clientHeight, care, desigur, arată ca ceva ilogic
Această problemă poate apărea în mod specific pentru documentElement.
Dar pentru a determina în mod fiabil dimensiunea paginii, ținând cont de defilare, puteți pur și simplu să luați maximum dintre aceste câteva proprietăți:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Înălțimea cu scroll: " + scrollVisota);
Obținerea derulării curente
Dacă un element obișnuit are derularea curentă, îl puteți obține în scrollLeft/scrollTop.
Dar pagina?
Ideea este că majoritatea browserelor vor gestiona corect o solicitare către documentElement.scrollLeft/Top, dar există erori în Safari/Chrome/Opera care necesită să utilizați document.body.
Ei bine, pentru a rezolva cu totul această problemă, puteți utiliza proprietățile window.pageXOffset/pageYOffset:
Alert("Defilare curentă de sus: " + window.pageYOffset); alert("Defilare la stânga curentă: " + window.pageXOffset);
Acestea sunt toate proprietățile:
- Nu este acceptat de IE8-
- Ele pot fi doar citite, dar nu pot fi modificate.
Dacă IE8 nu-i pasă, atunci utilizați doar aceste proprietăți.
Varianta între browsere, având în vedere că IE8 oferă o variantă pe documentElement:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Defilare curentă: " + scrollTop);
Schimbați derularea paginii: scrollTo, scrollBy, scrollIntoView
Pentru a derula o pagină folosind JavaScript, toate elementele acesteia trebuie să fie complet încărcate.
Pe elementele normale, scrollTop/scrollLeft poate fi schimbat în principiu, iar elementul se va derula.
Nimeni nu te deranjează să faci la fel cu pagina. În toate browserele, cu excepția Chrome/Safari/Opera, defilarea se poate face prin simpla setare document.documentElement.scrollTop, iar în acele browsere, document.body.scrollTop ar trebui să fie folosit pentru aceasta. Și totul va funcționa grozav.
Dar există o altă soluție, universală - metodele speciale de defilare a paginilor window.scrollBy(x,y) și window.scrollTo(pageX,pageY).
- Metoda scrollBy(x,y) va derula pagina în raport cu coordonatele sale curente.
- Metoda scrollTo(pageX,pageY) derulează pagina la coordonatele specificate în raport cu întregul document. Va fi echivalent cu setarea proprietăților scrollLeft/scrollTop. Pentru a derula la începutul documentului, trebuie doar să specificați coordonatele (0,0).
scrollIntoView
Metoda elem.scrollIntoView(top) trebuie apelată pe element și derulează pagina astfel încât elementul să fie în partea de sus dacă parametrul de sus este adevărat și în partea de jos dacă, respectiv, de sus este fals. Mai mult, dacă acest parametru de top nu este specificat, atunci va fi egal cu adevărat.
Interziceți defilarea
Există situații când este necesar să faceți un document „nedefilabil”. De exemplu, când afișați o casetă de dialog mare deasupra documentului - în așa fel încât vizitatorul să poată derula prin această fereastră, dar nu și documentul în sine.
Pentru a dezactiva derularea paginii, este suficient să setați proprietatea document.body.style.overflow = „hidden”.
În loc de document.body, poate exista orice element care trebuie dezactivat de la defilare.
Dar dezavantajul acestei metode este că bara de defilare în sine dispare. Dacă a ocupat o anumită lățime, atunci acum, în consecință, această lățime va fi eliberată, iar conținutul paginii va fi extins, textul va „sări”, ocupând tot spațiul eliberat.
Rezultate
- Pentru a obține dimensiunile părții vizibile a ferestrei, utilizați proprietatea: document.documentElement.clientWidth/Height
- Pentru a obține dimensiunile paginii luând în considerare derularea, utilizați: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement . clientHeight);
Când dezvoltați interfețe pentru site-uri web, de multe ori trebuie să utilizați JavaScript. Desigur, acest lucru este rău, dar în unele situații este pur și simplu imposibil să implementezi totul complet în CSS.
Cea mai frecventă nevoie pentru mine apare în determinarea lățimii sau înălțimii ferestrei browserului pentru manipulări ulterioare. Sub tăietură toate informațiile despre acest subiect.
Unde poate fi de folos?
Nu voi vorbi în numele tuturor, dar îmi vine la îndemână în integrarea cu Textpattern a tot felul de galerii, slidere etc., unde totul este scris în JS pur. Lucrurile care sunt strâns legate de JS sunt rare, dar încă apar, motiv pentru care a apărut această notă.
Îl puteți defini în 2 moduri: JS sau jQuery.
Determinarea lățimii sau înălțimii cu JS pur
Aceasta este modalitatea preferată, deoarece aproape toată lumea are un motor JavaScript. browser modern. Chiar browsere mobile a învățat să lucreze cu JS.
Desigur, există posibilitatea ca utilizatorul însuși să dezactiveze procesarea JS în browser, dar mi se pare că nu există atât de mulți astfel de „oameni ciudați”, deoarece aproape fiecare site folosește un fel de soluție care funcționează pe JS. .
În JS pentru a defini dimensiunile ecranului, trebuie să utilizați funcțiile:
Screen.width //Screen width screen.height //Screen height
Iată un exemplu de utilizare fără sens:
Dacă îl utilizați pentru a poziționa unele elemente pe pagină, atunci cea mai bună soluție va folosi nu dimensiunile ecranului, ci dimensiunile ferestrei browserului. În JS se procedează astfel:
Document.body.clientWidth //Lățimea browserului document.body.clientHeight //Înălțimea browserului
În consecință, iată un caz de utilizare fără sens:
Dimensionarea browserului cu jQuery
Personal, folosesc metoda descrisă mai jos. Această metodă funcționează numai dacă ați inclus anterior biblioteca jQuery pe site-ul dvs. Pe toate site-urile pe care trebuie să le fac, această bibliotecă este standardul de facto.
Pentru a folosi jQuery pentru sarcina noastră, trebuie să folosim codul:
$(fereastră).width(); //Lățimea browserului $(fereastră).înălțime(); // Înălțimea browserului
Și în cele din urmă, aș dori să spun că, dacă este posibil să faci fără JS și jQuery în general sau parțial, atunci asta este exact ceea ce trebuie să faci.
Spune pe rețelele sociale retelelor
Pentru ce este? De exemplu, avem un aspect frumos al site-ului care își arată toată frumusețea doar la o rezoluție de, să zicem, 1600 pe 1200. De exemplu, are o imagine foarte mare. frumoasa palarie. Ce se întâmplă dacă o persoană vizitează site-ul la o rezoluție de 1024 x 768? Da, doar capacul va fi vizibil. Nu e bun? Poate. Atunci de ce să nu faci așa ceva încât la înălțimea browserului/ecranului, antetul să fie pur și simplu tăiat, iar meniul și restul site-ului să plece? Wow, ce ai nevoie.
De fapt, am descris unul dintre exemplele pe care le-am întâlnit în practică (vezi poza). Am rezolvat problema simplu - prin javascript. Sau poate prin jQuery, nu-mi amintesc. Voi descrie ambele metode aici.
În primul rând, trebuie făcută o distincție între definiție rezolutia ecranului" Și " dimensiunea ferestrei browserului„(întrucât în unele articole au fost incidente – unele metode au fost salutate, altele au fost sugerate, deși într-un caz au măsurat rezoluția browserului, în celălalt – rezoluția monitorului).
Trebuie să decizi de la bun început ce este mai important pentru tine. În cazul acelui exemplu cu antet, m-am ghidat după rezoluția ecranului (monitor): la urma urmei, site-ul este frumos, dacă fereastra browserului este redusă manual, atunci lăsați-l să-și extindă browserul la ecran complet atunci când îl vizualizați acest site (nu există nimic pentru ei, înțelegi - ed.). Dar, de exemplu, pentru a ajusta imaginea extinsă Galeriile jQuery Lightbox Am folosit lățimea și înălțimea browserului.
Și după ce am ales, scriem codul, este posibil în antetul site-ului. În primul rând, un exemplu concentrat pe rezolutia ecranului.
Liniile 3-6 - javascript pur, liniile 7-11 - exemplu jQuery. Metodele javascript screen.width și screen.height sunt folosite pentru a determina lățimea și înălțimea. Ceea ce fac liniile este clar: primul script scrie calea către fișierul CSS suplimentar, iar al doilea script setează proprietatea css „background-position” pentru blocul cu identificatorul total.
Ne uităm la al doilea exemplu, dar care se va concentra pe rezoluția browserului. Totul este la fel, metodele s-au schimbat.
Deci din două exemple scurtă recenzie- ce să folosești pentru ce:
- ecran.latime. Specifică lățimea ecranului (monitor).
- ecran.înălțimea. Specifică înălțimea ecranului (monitor).
- document.body.clientWidth. Specifică lățimea browserului.
- document.body.clientHeight. Specifică înălțimea browserului.
- $(fereastră).width(). Specifică lățimea browserului, dar numai atunci când jQuery este prezent.
- $(fereastră).înălțime(). Specifică înălțimea browserului, dar numai atunci când jQuery este prezent.
Este clar că, dacă utilizați jQuery, atunci 5 este de preferat 3 și 6 decât 4 - sunt pur și simplu mai scurte. Ah și așa - pe gust și pe culoare.
În ceea ce privește intrările specifice de înălțime și lățime ale jQuery pentru ecrane, sincer nu le cunosc. În teorie, ar trebui să existe o construcție de genul 5-6 linii, dar cumva nu am întâlnit-o în practică, mi se pare că nu există. Da, și nu este necesar, screen.width este o construcție destul de scurtă, este suficient.
Da, există și $(document).width() - definește lățimea document HTML. Utilizare în practică - oarecum îndoielnic. Cine știe - mă voi bucura dacă împărtășești.
Asta e tot pentru azi! Așteaptă până în weekend și mergi masiv la grătar! (dacă nu ești bolnav de ceva, ca niște – aprox. ed.). Noroc!
