На этом уроке мы рассмотрим свойства объекта window , с помощью которых Вы можете получить размеры рабочей области окна браузера (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) доступны только для чтения и возвращают соответственно значения расстояний относительно левого угла экрана по горизонтали и вертикали в пикселях.
Например, выведем виде сообщения координаты х и у левого угла текущего окна браузера (документа) относительно левого верхнего угла экрана:
function 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) или вертикальном (pageYOffset) направлении относительного левого верхнего угла окна. Свойства scrollX и scrollY эквиваленты соответственно свойствам pageXOffset и pageYOffset . Эти свойства доступны только для чтения.
Например, вывести в сообщении количество пикселей, на которые документ был прокручен в горизонтальном (pageXOffset) и вертикальном (pageYOffset) направлении.
function scrollContent() { //Прокрутим текущий документ на 200рх вправо и вниз 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 || document.documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Количество пикселей, на которые документ был прокручен в горизонтальном и вертикальном направлении: X = " + winOffsetX + ", Y = " + winOffsetY + "."); } Узнать положения полос прокрутки
При разработке интерфейсов для сайтов частенько приходиться пользоваться JavaScript. Конечно же это плохо, но в некоторых ситуация просто невозможно реализовать полностью все на CSS .
Самая часта потребность именно у меня возникает в определении ширины или высоты окна браузера для дальнейших манипуляций. Под катом вся информация по этой теме.
Где это может пригодиться?Я не буду говорить за всех, но мне это пригождается в интеграции с Textpattern`ом всевозможных галерей, слайдеров и т.д., где все написано на чистом JS. Вещи, которые жестко завязаны на JS встречаются редко, но все же встречаются, поэтому и появилась эта заметка.
Определять можно 2 способами: JS или jQuery.
Определение ширины или высоты с помощью чистого JSЭто самый предпочтительный способ, так как движок JavaScript есть практически у каждого современного браузера. Даже мобильные браузеры научились работать с JS.
Конечно же есть вероятность того, что пользователь собственноручно отключить обработку JS в браузере, но, кажется мне, таких «странных людей» не так много, так как практически каждый сайт использует какие-нибудь решения, работающие на JS.
В JS, чтобы определить размеры экрана , нужно использовать функции:
Screen.width //Ширина экрана screen.height //Высота экрана
Вот бессмысленный пример использования:
alert(screen.width+"x"+screen.height);
Если Вы используете это для позиционирования каких-то элементов на странице, то лучшим решением будет использовать не размеры экрана, а размеры окна браузера . В JS это делается так:
Document.body.clientWidth //Ширина браузера document.body.clientHeight //Высота браузера
Соответственно вот бессмысленный пример использования:
alert(document.body.clientWidth+"x"+document.body.clientHeight);
Определение размеров браузера с помощью jQueryЛично я пользуюсь методом, который описан ниже. Этот метод работает только если у Вас на сайте ранее подключена библиотека jQuery. На всех сайтах, которые мне приходится делать эта библиотека является стандартом де`факто.
Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:
$(window).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, а другой - для блока с идентификатором total проставляет свойство css "background-position".
Смотрим второй пример, но который будет ориентироваться на разрешение браузера. Всё тоже самое, изменились методы.
Итак, из двух примеров краткий обзор - что для чего использовать:
Понятно, что если вы используете jQuery, то предпочтительнее 5 вариант, нежели 3, и 6 нежели 4 - они покороче просто. Ну а так - на вкус и на цвет.
Что касается специфических записей высоты и ширины экраны дл jQuery - то, по правде говоря, я их не знаю. По идее должна быть конструкция типа 5-6 строк, но как-то на практике не сталкивался, сдаётся мне, их нет. Да и не надо, screen.width достаточно короткая конструкция, её хватает.
Да, ещё есть $(document).width() - определяет ширину HTML документа. Использования на практике - как-то сомнительно. Кто знает - буду рад, если поделитесь.
На сегодня всё! Держимся до выходных и массово едем на шашлыки! (если только вы не больны чем-то, как некоторые - прим.ред.). Удачи!
