Как да определите височината на js страница. Как да определите "разделителната способност на екрана" и "размера на прозореца на браузъра" в JavaScript и jQuery. Промяна на превъртането на страницата: scrollTo, scrollBy, scrollIntoView

Когато разработвате интерфейси за уебсайтове, често се налага да използвате JavaScript. Разбира се, това е лошо, но в някои ситуации е просто невъзможно да се внедри всичко напълно в CSS.

Най-честата нужда, която имам, е да определя ширината или височината на прозореца на браузъра за по-нататъшна манипулация. Под разреза е цялата информация по тази тема.

Къде може да бъде полезно това?

Няма да говоря за всички, но това е полезно за мен при интегрирането с Textpattern на всякакви галерии, слайдери и т.н., където всичко е написано в чист JS. Нещата, които са строго обвързани с JS са редки, но се случват, затова се появи тази бележка.

Можете да го дефинирате по 2 начина: JS или jQuery.

Определяне на ширина или височина с помощта на чист JS

Това е най-предпочитаният метод, тъй като почти всеки съвременен браузър има JavaScript двигател. Дори мобилните браузъри са се научили да работят с JS.

Разбира се, има възможност самият потребител да деактивира обработката на JS в браузъра, но ми се струва, че няма много такива „странни хора“, тъй като почти всеки сайт използва някакво решение, което работи на JS.

В JS, за да определите размерите на екрана, трябва да използвате функциите:

Screen.width //Ширина на екрана screen.height //Височина на екрана

Ето един безсмислен пример за употреба:

предупреждение (screen.width+"x"+screen.height);

Ако използвате това, за да позиционирате някои елементи на страницата, тогава най-доброто решение би било да използвате размерите на прозореца на браузъра, а не размерите на екрана. В JS това се прави по следния начин:

Document.body.clientWidth //Ширина на браузъра document.body.clientHeight //Височина на браузъра

Съответно, ето безсмислен пример за употреба:

предупреждение (document.body.clientWidth+"x"+document.body.clientHeight);

Оразмеряване на браузър с jQuery

Лично аз използвам метода, описан по-долу. Този метод работи само ако преди това сте инсталирали библиотеката jQuery на вашия сайт. На всички сайтове, които трябва да създам, тази библиотека е де факто стандарт.

За да използваме jQuery за нашата задача, трябва да използваме кода:

$(прозорец).width(); //Ширина на браузъра $(window).height(); //Височина на браузъра

И в крайна сметка бих искал да кажа, че ако е възможно да се направи без JS и jQuery като цяло или частично, тогава това е точно това, което трябва да направите.

Споделете в социалните медии мрежи

За какво е това? Например, имаме красиво оформление на уебсайт, което показва цялата си красота само при резолюция, да речем, 1600 на 1200. Например, има много голям красив хедър. Какво се случва, ако човек посети сайта с резолюция 1024 на 768? Да, ще се вижда само шапката. Не е добре? Може би. Тогава защо да не направите такова нещо, че предвид височината на браузъра/екрана, заглавката просто ще бъде отрязана, а менюто и останалата част от сайта ще изчезнат? Уау, точно това, от което се нуждаеш.

Всъщност описах един от примерите, които срещнах на практика (вижте снимката). Реших проблема просто - чрез javascript. Или може би чрез jQuery, не помня. Тук ще опиша и двата метода.

На първо място, необходимо е да се прави разлика между дефинициите за „разделителна способност на екрана“ и „размер на прозореца на браузъра“ (тъй като в някои статии имаше инциденти - те критикуваха някои методи, предложиха други, въпреки че в един случай измерваха разделителната способност на браузъра, в другата - резолюцията на монитора).

Трябва да определите от самото начало кое е по-важно за вас. В случая с този пример със заглавката се ръководех от разделителната способност на екрана (монитора): все пак сайтът е красив, ако прозорецът на браузъра е намален ръчно, тогава нека разширят браузъра си на цял екран, когато гледат това сайт (те нямат бизнес, знаете - бележка на редактора). Но например, за да коригирам разширеното изображение на галерията на jQuery Lightbox, използвах ширината и височината на браузъра.

И след като сме избрали, пишем кода, може и в хедъра на сайта. Първо пример, фокусиран върху разделителната способност на екрана.

Редове 3-6 са чисто javascript, редове 7-11 са пример в jQuery. За определяне на ширината и височината се използват javascript методите screen.width и screen.height. Какво правят редовете е ясно: първият скрипт указва пътя до допълнителен файл CSS, а другият задава css свойството „background-position“ за блока с общия идентификатор.

Нека разгледаме втория пример, но който ще се фокусира върху разделителната способност на браузъра. Всичко е същото, методите са се променили.

И така, от два примера, кратък преглед на това какво да използвате за какво:

екран.ширина. Определя ширината на екрана (монитора).

екран.височина Определя височината на екрана (монитора).

document.body.clientWidth. Определя ширината на браузъра.

document.body.clientHeight. Определя височината на браузъра.

$(window).width() . Определя ширината на браузъра, но само ако присъства jQuery.

$(window).height() . Определя височината на браузъра, но само ако присъства jQuery.

Ясно е, че ако използвате jQuery, тогава опция 5 е за предпочитане пред 3, а 6 пред 4 - просто са по-кратки. Е, зависи от вкуса и цвета.

Що се отнася до конкретните записи за височината и ширината на екрана за jQuery, честно казано, не ги знам. На теория трябва да има структура от 5-6 реда, но някак си не съм я срещал на практика, струва ми се, че не съществуват. И не е необходимо, screen.width е достатъчно кратка конструкция, достатъчно е.

Да, има и $(document).width() - определя ширината на HTML документа. Използването на практика е някак съмнително. Кой знае, ще се радвам да споделиш.

Това е всичко за днес! Да издържим до уикенда и да отидем масово на барбекюта! (освен ако не си болен от нещо, като някои - бел.ред.). Късмет!

Здравейте! Продължавайки темата в този урок, ще разгледаме проблема с превъртането на уеб страница и манипулирането на размерите на браузъра. Как можете да намерите ширината на браузъра? Как да превъртите уеб страница с помощта на JavaScript? Мисля, че ще намерите отговорите на тези въпроси в този урок.

Ширина/височина на видимата част на прозореца на браузъра Свойствата clientWidth/Height за даден елемент са точно широчината/височината на видимата област на прозореца.


Не window.innerWidth/Height

Трябва да се отбележи, че всички браузъри с изключение на IE8 също могат да поддържат свойствата window.innerWidth/innerHeight. Те спестяват текущ размерпрозорец.

Каква е разликата? Ти питаш. Малък е, разбира се, но изключително важен.

Свойствата clientWidth/Height, ако има лента за превъртане, ще върнат точно ширината/височината вътре в нея, налична за целия документ, а window.innerWidth/Height ще игнорира нейното присъствие.

Ако дясната страна на страницата е заета от лента за превъртане, тогава тези редове ще показват различни неща:

Alert(window.innerWidth); // цялата пълна ширина на прозореца alert(document.documentElement.clientWidth); // ширина минус превъртане

Обикновено се интересуваме само от наличната ширина на прозореца, например, за да нарисуваме нещо, тоест минус лентата за превъртане. Затова често се използва documentElement.clientWidth.

Ширина/височина на уеб страница, като се вземе предвид превъртането

Да, теоретично, видимата част от страницата е documentElement.clientWidth/Height, но пълният размер, включително лентата за превъртане, по аналогия е documentElement.scrollWidth/scrollHeight.

Това важи за всички правилни елементи.

Но за страница с тези свойства може да възникне проблем, когато превъртането е там или не. В този случай те не работят правилно. Трябва да се каже, че в браузъри Chrome/ Safari и Opera, при липса на лента за превъртане, стойността на documentElement.scrollHeight в този случай може да бъде дори по-малка от documentElement.clientHeight, което, разбира се, изглежда като нещо нелогично

Този проблем може да възникне специално за documentElement.

Но можете надеждно да определите размера на страницата, като вземете предвид превъртането, като просто вземете максимума от тези няколко свойства:

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Височина, включително превъртане: " + scrollVisota);

Получаване на текущия свитък

Ако обикновен елемент има текущо превъртане, можете да го получите в scrollLeft/scrollTop.

Какво ще кажете за страницата?

Въпросът е, че повечето браузъри ще обработят заявка към documentElement.scrollLeft/Top правилно, но Safari/Chrome/Opera има грешки, които изискват да използвате document.body.

Е, за да заобиколите напълно този проблем, можете да използвате свойствата window.pageXOffset/pageYOffset:

Alert("Текущо горно превъртане: " + window.pageYOffset); alert("Текущо ляво превъртане: " + window.pageXOffset);

Това са всички имоти:

• Не се поддържа IE8-
• Те могат само да се четат и не могат да се променят.

Ако IE8 няма значение, тогава просто използваме тези свойства.

Опция за различни браузъри, като се вземе предвид IE8, предоставя опция за documentElement:

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Текущо превъртане: " + scrollTop);

Промяна на превъртането на страницата: scrollTo, scrollBy, scrollIntoView

За да превъртите страница с помощта на JavaScript, всички нейни елементи трябва да са напълно заредени.

При обикновените елементи scrollTop/scrollLeft по принцип може да се промени и елементът ще се превърта.

Никой не ви пречи да направите същото и със страницата. Във всички браузъри с изключение на Chrome/Safari/Opera можете да превъртате, като просто зададете document.documentElement.scrollTop, а в тези браузъри трябва да използвате document.body.scrollTop за това. И всичко ще работи чудесно.

Но има и друго, универсално решение - специални методи за превъртане на страници window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

• Методът scrollBy(x,y) ще превърти страницата спрямо текущите й координати.
• Методът scrollTo(pageX,pageY) превърта страницата до посочените координати спрямо целия документ. Това ще бъде еквивалентно на настройка на свойствата scrollLeft/scrollTop. За да превъртите до началото на документа, просто трябва да посочите координатите (0,0).

scrollIntoView

Методът elem.scrollIntoView(top) трябва да бъде извикан на елемента и да превърта страницата, така че елементът да е отгоре, ако top е true, и отдолу, ако top е false. Освен това, ако този горен параметър не е посочен, тогава той ще бъде равен на true.

Анти-скрол

Има ситуации, когато е необходимо да направите документ „непревъртаем“. Например показване на голям диалогов прозорец над документ, така че посетителят да може да превърта през диалоговия прозорец, но не и самия документ.

За да предотвратите превъртането на страницата, просто задайте свойството document.body.style.overflow = “hidden”.

Вместо document.body може да има всеки елемент, който трябва да бъде деактивиран от превъртане.

Но недостатъкът на този метод е, че самата лента за превъртане изчезва. Ако е заемал определена ширина, тогава тази ширина ще бъде освободена и съдържанието на страницата ще бъде разширено, текстът ще „скочи“, заемайки цялото свободно пространство.

Резултати

• За да получите размерите на видимата част на прозореца, използвайте свойството: document.documentElement.clientWidth/Height
• За да получите размери на страницата, като вземете предвид превъртането, използвайте: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement .clientHeight);

В този урок ще разгледаме свойствата на обекта прозорец, с който можете да получите размерите на работната зона на прозореца на браузъра (innerWidth и innerHeight), размерите на самия прозорец (outerWidth и outerHeight), местоположението му спрямо горния ляв ъгъл на екрана на потребителя (screenLeft и screenTop) и позиционира превъртането (pageXOffset и pageYOffset).

свойства innerWidth и innerHeight

Те са предназначени да получат размерите на видимата работна зона на прозореца на браузъра. Тези. Свойствата innerWidth и innerHeight имат за цел да получат ширината и височината на зоната, в която се показва HTML документът. Тези свойства са само за четене и връщат стойности на пиксели.

Например вземете височината и ширината на видимата работна зона на прозореца на браузъра:

Ширина на видимата зона за гледане (widthContenArea):

Ширина на видимата зона за гледане (heightContenArea):

// ширина на видимия прозорец за изглед (за всички браузъри с изключение на Internet Explorer 8) var widthContenArea = window.innerWidth; // височина на видимия прозорец за изглед (за всички браузъри с изключение на Internet Explorer 8) var heightContenArea = window.innerHeight; // ширина на видимия прозорец за изглед (за Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // височина на видимия прозорец за изглед (за Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // ширина на видимия прозорец за изглед (за всички браузъри) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // височина на видимия прозорец за изглед (за всички браузъри) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

свойства outerWidth и outerHeight

Те са предназначени да получат размерите на целия прозорец на браузъра, т.е. включително ленти с инструменти, ленти за превъртане, лента на състоянието, граници на прозорци и др. Свойствата outerWidth и outerHeight са само за четене и връщат съответно ширината и височината на прозореца в пиксели.

Например вземете височината и ширината на прозореца на браузъра:

Ширина на прозореца на браузъра (widthWindow):

Височина на прозореца на браузъра (heighWindow):

// ширина на прозореца на браузъра var widthWindow = window.outerWidth; // височина на прозореца на браузъра var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

свойства screenLeft (screenX) и screenTop (screenY).

Те са предназначени да получат координатите на горния ляв ъгъл на прозореца на браузъра или документа спрямо горния ляв ъгъл на екрана на потребителя.

В този случай свойствата screenLeft и screenTop работят в Internet Explorer, а свойствата screenX и screenY работят в Mozilia Firefox. В Chrome, Safari и други подобни браузъри можете да използвате както свойствата screenLeft и screenTop, така и свойствата screenX и screenY.

Когато използвате тези свойства, трябва да вземете предвид факта, че някои браузъри могат да върнат координатите на горния ляв ъгъл на документа, а някои браузъри могат да върнат координатите на горния ляв ъгъл на прозореца. Свойствата screenleft (screenX) и screenTop (screenY) са само за четене и връщат съответно хоризонталното и вертикалното разстояние спрямо левия ъгъл на екрана в пиксели.

Например, нека покажем под формата на съобщение координатите x и y на левия ъгъл на текущия прозорец на браузъра (документ) спрямо горния ляв ъгъл на екрана:

функция windowXY() ( // Използвайки свойствата screenleft и screenTop, получаваме координатите на местоположението на прозореца (документа) var winX = window.screenLeft; var winY = window.screenTop; // Използвайки свойствата screenX и screenY, получаваме координатите на местоположението на прозореца (документа) winX = window.screenX; winY = window.screenY; // Получаване на координатите на местоположението на прозореца (документа) във всички браузъри winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Координати на прозореца спрямо екрана на потребителя: X = " + winX + ", Y = " + winY + "."); ) Открийте координати

свойства pageXOffset (scrollX) и pageYOffset (scrollX)

Те са предназначени да получат броя на пикселите, с които документът е превъртен в хоризонтална (pageXOffset) или вертикална (pageYOffset) посока спрямо горния ляв ъгъл на прозореца. Свойствата scrollX и scrollY са еквивалентни съответно на свойствата pageXOffset и pageYOffset. Тези свойства са само за четене.

Например, покажете в съобщение броя на пикселите, с които документът е превъртен в хоризонтална (pageXOffset) и вертикална (pageYOffset) посоки.

функция scrollContent() ( //Превъртете текущия документ 200px надясно и надолу window.scrollBy(200,200); //Вземете стойностите с помощта на свойствата pageXOffset и pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Вземете стойностите, с които документът е превъртян хоризонтално или вертикално за Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //За всички браузъри: winOffsetX = window.pageXOffset || документ .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; предупреждение ("Брой пиксели, с които документът е превъртен хоризонтално и вертикално: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Разберете позициите на лентите за превъртане