Определение размеров видимой части страницы


Содержание

Определяем размер окна браузера (JavaScript, jQuery)

Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на jQuery это делается так:

doc_w = $(document).width();
doc_h = $(document).height();
//или
win_w = $(window).width();
win_h = $(window).height();

но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() <$( "body" ).prepend( "

На JavaScript код, определения разрешения экрана

scr_w=screen.width;
scr_h=screen.height;

На JavaScript определяем размер клиентской части окна браузера

client_w=document.body.clientWidth;
client_h=document.body.clientHeight;

Кроссбраузерное получение размеров окна на JS

function getPageSize() <
var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) <
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
> else if (document.body.scrollHeight > document.body.offsetHeight) < // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
> else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight) < // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
> else < // Explorer Mac. would also work in Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
>

// for small pages with total height less then height of the viewport
if(yScroll > else <
pageW > >

Поделись с друзьями:

комментария 4 для записи Определяем размер окна браузера (JavaScript, jQuery)

привет, вопрос к админу — а в фейсбуке вас нет?

Размеры и прокрутка

Со свойствами элемента на странице можно ознакомиться на примере.

Всe возвращаемые и изменяемые значения указываются в пикселях (px).

clientHeight Содержит высоту элемента внутри границ.
clientLeft Содержит ширину левой границы.
clientTop Содержит ширину верхней границы.
clientWidth Содержит ширину элемента внутри границ.
elementFromPoint() Возвращает элемент, который находится на указанных координатах относительно окна.
getBoundingClientRect() Возвращает объект координат элемента.
offsetHeight Содержит полную высоту элемента.
offsetLeft Содержит левое смещение элемента относительно offsetParent.
offsetParent Содержит первый родительский элемент у которого CSS свойство position не равно static , либо body если его нет.
offsetTop Содержит смещение элемента сверху относительно offsetParent.
offsetWidth Содержит полную ширину элемента.
pageXOffset Горизонтальная прокрутка страницы.
pageYOffset Вертикальная прокрутка страницы.
scrollBy() Позволяет прокрутить страницу по горизонтали и вертикали относительно текущей прокрутки.
scrollHeight Содержит высоту элемента с учетом вертикальной прокрутки.
scrollIntoView() Позволяет прокрутить страницу так, что бы элемент оказался вверху либо внизу.
scrollLeft Содержит ширину прокрученной части элемента слева.
scrollTo() Позволяет прокрутить страницу по горизонтали и (или) вертикали в указанное место.
scrollTop Содержит высоту прокрученной части элемента сверху.
scrollWidth Содержит ширину элемента с учетом горизонтальной прокрутки.

clientHeight

Свойство clientHeight содержит высоту элемента внутри границ вместе с padding , но без border и полосы прокрутки).

Синтаксис

Комментарии

Если у элемента появляется прокрутка то высота содержимого уменьшается на высоту полосы прокрутки (около 16px — зависит от браузера, ОС, устройства).

Если элемент скрытый, то clientHeight равно 0.

Если есть полоса прокрутки, clientHeight возвращает именно ширину внутри неё, доступную для документа, а innerHeight – игнорируют её наличие.

Примеры

Размеры рабочей области браузера:

clientLeft

Свойство clientLeft содержит ширину левой границы (значение border-left).

Синтаксис

Комментарии

Если элемент скрытый, то clientLeft равно 0.

Примеры

clientTop

Свойство clientTop содержит ширину верхней границы (значение border-top ).

Синтаксис

Комментарии

Если элемент скрытый, то clientTop равно 0.

Примеры

clientWidth

Свойство clientWidth содержит ширину элемента внутри границ вместе с padding, но без border и прокрутки).

Синтаксис

Комментарии

Если у элемента появляется прокрутка то ширина содержимого уменьшается на высоту прокрутки (около 16px — зависит от браузера, ОС, устройства).

Если элемент скрытый, то clientWidth равно 0.

Если есть полоса прокрутки, clientWidth возвращает именно высоту внутри неё, доступную для документа, а innerWidth – игнорируют её наличие.

Примеры

elementFromPoint()

Метод elementFromPoint возвращает элемент, который находится на указанных координатах (x,y) относительно окна.

Синтаксис

Примеры

getBoundingClientRect()

Метод getBoundingClientRect возвращает объект координат элемента.

Синтаксис

Описание, комментарии

Координаты рассчитываются относительного видимой части страницы без учета прокрутки (относительно окна). То есть как при position: fixed .

Иначе говоря, если страницу прокрутить, то элемент поднимется выше или опустится ниже – его координаты относительно окна изменятся.

В возвращаемом объекте содержатся свойства: left, top, right, bottom . Стоит отметить, что эти свойства не имеют ничего общего с CSS свойствами. В них содержатся расстояния до соответствующих сторон элемента. Для left/right — от левой границы видимой области страницы, а для top/bottom — верхней.

Например, кликните на кнопку, чтобы увидеть её координаты:

Если вы прокрутите эту страницу, то положение кнопки в окне изменится, и её координаты, соответственно, тоже.

  • Координаты могут быть дробными – это нормально, так как они возвращаются из внутренних структур браузера.
  • Координаты могут быть и отрицательными, например если прокрутить страницу так, что верх элемента будет выходить за верхнуюю границу окна, то его top -координата будет меньше нуля.
  • Некоторые современные браузеры также добавляют к результату getBoundingClientRect свойства для ширины и высоты: width/height , но их можно получить и простым вычитанием: height = bottom — top , w >.

Примеры

offsetHeight

Свойство offsetHeight содержит полную высоту элемента (включает собственно высоту элемента, высоту границ, padding , scrollbar ).

Синтаксис

Комментарии

Если элемент скрытый, то offsetHeight равно 0.

Примеры

offsetLeft

Свойство offsetLeft содержит левое смещение элемента относительно offsetParent (относительно родительского элемента у которого css-свойство position не равно static ).

Содержит расстояние от offsetParent до границы элемента (то есть без учета margin ).

Синтаксис


Примеры

Если у родительских элементов нет позиционирования то offsetLeft — левое смещение элемента относительно body :

Но если есть родительский элемент со свойство position отличными от static :

В этом примере у элемента с id равным elem левое смещение относительно body — 600px, но относительно offsetParent — 100px;

Свойство offsetLeft (как и все остальные метрики) не учитывает отступы margin (так как это не часть элемента). Но в css отступы это часть элемента. Поэтому:

offsetParent

Синтаксис

Примеры

offsetTop

Свойство offsetTop содержит смещение элемента сверху относительно offsetParent (относительно родительского элемента у которого css-свойство position не равно static ).

Содержит расстояние от offsetParent до границы элемента (то есть без учета margin ).

Синтаксис

Примеры

Если у родительских элементов нет позиционирования то offsetTop — смещение элемента сверху относительно body :

Но если есть родительский элемент со свойство position отличными от static :

В этом примере у элемента с id равным elem верхнее смещение относительно body — 100px, но относительно offsetParent — 50px;

Свойство offsetTop (как и все остальные метрики) не учитывает отступы margin (так как это не часть элемента). Но в css отступы это часть элемента. Поэтому:

offsetWidth

Свойство offsetWidth содержит полную ширину элемента (включает собственно ширину элемента, ширину границ, padding , scrollbar ).

Синтаксис

Комментарии

Если элемент скрытый, то offsetWidth равно 0.

Примеры

pageXOffset

Свойство pageXOffset — горизонтальная прокрутка страницы. Фактически это scrollLeft специально для страницы, но со scrollLeft для страницы могут возникать некоторые проблемы.

Свойство pageXOffset нельзя менять (в отличии от scrollLeft).

Синтаксис

Совместимость с браузерами

Да 9,0 Да Да Да

Примеры

Для IE8 и ранее, можно использовать «document.documentElement.scrollLeft»

pageYOffset

Свойство pageYOffset — вертикальная прокрутка страницы. Фактически это scrollTop специально для страницы, но со scrollTop для страницы могут возникать некоторые проблемы.

Свойство pageYOffset нельзя менять (в отличии от scrollTop).

Синтаксис

Совместимость с браузерами

Да 9,0 Да Да Да

Примеры

Для IE8 и ранее, можно использовать «document.documentElement.scrollTop»

scrollBy()

Функция scrollBy позволяет прокрутить страницу по горизонтали и вертикали относительно текущей прокрутки.

Синтаксис

Параметры

Примеры

scrollHeight

Свойство scrollHeight содержит высоту элемента с учетом вертикальной прокрутки.

Если у элемента нет вертикальной полосы прокрутки, то scrollHeight равно clientHeight.

Синтаксис

Комментарии

Если элемент скрытый, то scrollHeight равно 0.

В некоторых браузерах определение высоты страницы ( documentElement ) с учетом вертикальной прокрутки этим свойством работает некорректно. Надёжно определить размер страницы с учетом прокрутки можно, взяв максимум из нескольких свойств:

Примеры

scrollIntoView()

Метод scrollIntoView позволяет прокрутить страницу так, что бы элемент оказался вверху либо внизу.

В параметре получает логическое значение: если true — элемент кажется вверху, если false — внизу. По умолчанию true .

Синтаксис

Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:

А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:

scrollLeft

Свойство scrollLeft содержит ширину прокрученной части элемента слева.

Это свойство можно менять — и элемент автоматически будет прокручиваться к новому значению свойства.

Синтаксис

newValue — новая ширина прокрученной части элемента слева.

Комментарии

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

Что же со страницей?

Большинство браузеров корректно обработает запрос к document.documentElement.scrollLeft/Top , однако Safari/Chrome/Opera есть ошибки, из-за которых следует использовать document.body .

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset

Примеры

scrollTo()


Метод scrollTo позволяет прокрутить страницу по горизонтали и (или) вертикали в указанное место.

Синтаксис

Параметры

Примеры

scrollTop

Свойство scrollTop содержит высоту прокрученной части элемента сверху. Также его можно менять.

Синтаксис

newValue — новая высота прокрученной части элемента сверху.

Илон Маск рекомендует:  Как добавить рамку вокруг ячеек

Комментарии

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

Что же со страницей?

Большинство браузеров корректно обработает запрос к document.documentElement.scrollLeft/Top , однако Safari/Chrome/Opera есть ошибки, из-за которых следует использовать document.body .

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset

Примеры

scrollWidth

Свойство scrollWidth содержит ширину элемента с учетом горизонтальной прокрутки.

Если у элемента нет горизонтальной прокрутки, то scrollWidth равно clientWidth.

Синтаксис

Комментарии

Если элемент скрытый, то scrollWidth равно 0.

В некоторых браузерах определение высоты страницы ( documentElement ) с учетом вертикальной прокрутки этим свойством работает некорректно. Надёжно определить размер страницы с учетом прокрутки можно, взяв максимум из нескольких свойств:

JavaScript: размеры элементов, координаты, прокрутка

Метрики элемента

offsetParent — ссылка на родительский по отображению элемент (для элементов с абсолютным позиционированием таким элементом будет ближайший по иерархии объект с относительным позиционирование, а не непосредственный родитель).
offsetLeft/offsetTop — смещение относительно offsetParent
offsetWidth/offsetHeight — внешние размеры элемента (включая рамку)

clientTop/clientLeft — ширина отступа внутренней части элемента от внешней (ширина рамки border )
clientWidth/clientHeight — размеры элемента внутри рамки (с полями, без прокрутки)
scrollWidth/scrollHeight — учитывают прокрученную область (которую не видно)
scrollLeft/scrollTop — текущая прокрутка — невидимая уже прокрученная область — эти значения можно изменять

для документа:
document.documentElement.clientWidth/Height — ширина и высота видимой области окна
window.innerWidth/window.innerHeight — текущий размер окна браузера (с прокруткой)

точное определение размера страницы с учетом прокрутки:

Царский блог

Философия программирования

JavaScript: Геометрия элемента – позиция, размеры, прокрутка и перемещение

Как Web-программисту передо мной иногда возникают вопросы позиционирования и определение размеров элементов на HTML-странице или в HTML-документе. Приходится каждый раз копаться в книгах, парсить интернет и т.п. Вопросы на форумах я уже давно не задаю, так как по-моему почти все вопросы уже заданы и наша задача – найти правильные ответы на них.

И вот я решил соединить все полученные мной знания в этом посте, где я постараюсь подробно описать тему БЕЗ применения сторонних библиотек, таких как jQuery или Prototype, то есть мы будем использовать pure JavaScript, то есть чистый JavaScript, и код в принципе по идее должен корректно работать в большинстве браузеров, как старых так и новых версий.

Определяем позицию полос прокрутки

Как правило, для каждой страницы HTML существует две точки отсчёта координат, относительно которых мы получаем координаты мыши и элементов – это начало документа или страницы и левый верхний угол видимого окна, называемый иногда viewport, или просто window.

Например, при получении координат мыши мы можем обратиться к свойствам pageX,pageY – координаты отчёта от начала документа, и clientX,clientY – координаты относительно текущего окна (viewport или window). Т.о. если мы прокручмвали документ, эти координаты будут отличаться друг от друга, а нам надо привести всё к общему знаменателю для точного позиционирования элементов.

Для этого нам надо знать величины прокрутки, чтобы оттлакиваться уже от них, и поэтому пишем универсальную функцию getScrollOffsets, возвращающую эти значения и корректно работающую для практически всех браузеров:

Эту полезную функцию я взял из книги Флэнагана “JavaScript. Подробное руководство”, протестировал её и она реально работает.

Находим позицию элемента

Теперь мы без проблем сможем найти позицию элемента относительно документа (а не окна), используя универсальный метод getBoundingClientRect и прибавив значения полос прокрутки:

В этой функции мы добавили проверку на наличии в текущем агенте (т.е. браузере) читателя метода getBoundingClientRect(), и если его нет- используем второй вариант, менее надёжный, так как он не всегда возвращает правильные результаты для различных версий браузеров.

Но в принципе сегодня у всех агентах, что я тестировал эту функцию, присутствует getBoundingClientRect() метод, поэтому 2-ой вариант с использованием offset[Left,Top,Parent] можно наверное удалить.

Втискиваем элемент в видимую часть окна

Иногда нам бывает нужно, что бы создаваемый на лету элемент с абсолютным позиционированием влезал в пределы видимой части окна, то есть всегда был виден целиком, а не торчала какая-то его часть, если он был вызван где-нибудь у края окна.

Для этого нам нужно помимо того, что мы уже знаем, определять размеры элемента, а также размеры viewport’а (то есть текущие размеры окна).

Первое досигается легко за счёт offsetWidth,offsetHeight свойств элемента, а для второго нам опять-таки надо написать вспомогательную (helper) функцию.

Эту функцию я также взял из книги Флэнагана, с одним важным нюансом – Флэнаган пишет, что надо использовать свойства innerWidth,innerHeight, если они доступны (не в IE =7, Fx, Chrome, Opera,Safari (Windows 7).

Итак, теперь вписываем наш элемент в границы видимой части окна так:

Вуаля! Красиво и профессионально, как и должно быть.
Теперь перейдём к ещё одной вкусняшке – drag&drop, или в просторечье, буксировке.

Перетаскиваем элемент

Эту функциональность наверное правильно будет назвать просто dragging, то есть буксировка, перетаскивание с места на место, возможно, с какой-нибудь определенной целью или без оной.
Она осуществляется довольно просто и работает независимо от агента пользователя (которые понимают JavaScript и рендерят оконные страницы).

Сперва определимся с алгоритмом. Нам надо перехватывать три мышиных события – mousedown,mousemove и mouseup.

В первом (mousedown) – если оно произошло в пределах участка нашего элемента, предназначенного для его перетаскивания (этот может быть сам элемент целиком, либо, например, его заголовок) – мы фиксируем разницу между текущими координатами мыши и позицией левого верхнего угла нашего элемента, а также включаем условный флаг dragging, сигнализирующий о том, что мы готовы перемещать наш элемент.

Во втором событии (mousemove), если поднят флаг dragging, мы отнимаем полученные в обработчкие mousedown смещения от текущей позиции курсора и по ним позиционируем наш элемент.

В третьем, самом простом, но не менее важном обработчкике (mouseup) мы просто сбрасываем (опускаем) наш условный флаг dragging, сигнализируя, что перетаскивание элемента завершено.

Всё это простое действо может уместиться буквально в десятке строчек JavaScript-кода и реально работает!

Смотрите функциональный код с дополнительными короткими комментариями:

Замечу, что этот код позволяет перетаскивать виджет любой кнопкой мыши – как левой, так и правой и даже средней. Для предотвращения этого в обработчике mousedown проверяем флаг нажатой кнопки мыши (свойство события button: 0 – левая, 1 – средняя, 2 – правая) и действуем соответственно.

В заключении приведу функцию attach – кросс-браузерный вариант привязки обработчкиков событий.

Всё гениальное – просто. Нет, я не устану это повторять. пусть оно у меня в зубах завязнет. )))

Определяем ширину скролл-баров

Зачем это нужно? Вот и я думаю, зачем. Но когда я использовал оригинальную версию из книги Фланагана функции getViewportSize, как я уже упоминал, она возвращала размеры видимой части окна вместе с шириной скроллбаров (точнее, эти значения возвращали сво-ва innerWidth,innerHeight), и я решил идти напролом и найти ширину бордюра, чтобы отнимать её из полученных значений и корректно позиционировать свой элемент.

И я после недолгих поисков нарыл такую, видимо корректную функцию:

Но использование лишнего кода, тем более относительного длинного и замороченного (я сторонник минималистских и простых решений везде, где это возможно), было нежелательно для моего проекта, поэтому я нашёл способ определять размеры viewport’а без ширины полос (используя window.document.documentElement.[clientWidth,clientHeight], как я и писал выше), и эта функция мне в принципе не понадобилась, но на всякий случай я её здесь всё же привёл, вдруг когда-нибудь понадобится определить ширину полос скроллбара.

Крепкого чая, крепкой любви и крепкого счастья.

Размеры элементов и прокрутка веб-страницы

Размеры элементов и прокрутка веб-страницы

Здравствуйте! В продолжении темы прокрутка элементов на веб-странице в этом уроке мы с вами рассмотрим такой вопрос как прокрутка веб-страницы и манипулирование размерами браузера. Как можно найти ширину браузера? Как прокрутить веб-страницу средствами JavaScript ? Ответы на эти вопросы я думаю вы найдете в этом уроке.

Ширина/высота видимой части окна браузера

Свойства clientWidth/Height для элемента – это как раз и есть ширина/высота видимой области окна.

Надо отметить, что все браузеры, кроме IE8-, могут также поддерживать свойства window.innerWidth/innerHeight. Они сохраняют текущий размер окна.


В чём же отличие? Спросите вы. Оно конечно небольшое, но черезвычайно важное.

Свойства clientWidth/Height, если есть полоса прокрутки, возвратят именно ширину/высоту внутри неё, доступную для всего документа, а window.innerWidth/Height – будут игнорировать её наличие.

Если правую часть страницы занимает полоса прокрутки, то вот эти строки выведут разное:

Обычно нас интересует только доступная ширина окна, для примера, чтобы нарисовать что-то, то есть за вычетом полосы прокрутки. Поэтому зачастую используется documentElement.clientWidth.

Ширина/высота веб-страницы с учётом прокрутки

Да теоретически, видимая часть страницы – это documentElement.clientWidth/Height, а вот полный размер с учётом полосы прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight.

Это верно для всех обычных элементов.

А вот для страницы с этими свойствами может возникнуть проблема, когда прокрутка то есть, то ее нет. В этом случае они работают некорректно. Надо сказать, что в браузерах Chrome/Safari и Opera при отсутствии полосы прокрутки значение documentElement.scrollHeight в этом случае может быть даже меньше, чем documentElement.clientHeight, что, конечно же, выглядит как нечто не логичное

Эта проблема может возникать именно для documentElement.

А вот надёжно определить размер страницы с учетом прокрутки можно, просто взяв максимум из этих нескольких свойств:

Получение текущей прокрутки

Если у обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

То , что же со страницей?

Дело в том, что большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top, однако Safari/Chrome/Opera есть ошибки, из-за которых вам следует использовать document.body.

Ну а, чтобы вообще обойти эту проблему, вы можете использовать свойства window.pageXOffset/pageYOffset:

Эти все свойства:

  • Не поддерживаются IE8-
  • Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает вариант на documentElement:

Изменение прокрутки страницы: 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).
Илон Маск рекомендует:  Работа с wddx в рнр

scrollIntoView

Метод elem.scrollIntoView(top) должен вызываться на элементе и прокручивает страницу таким образом, чтобы элемент оказался вверху, если же параметр top равен true, и внизу, если top соответственно равен false. Причем, если данный параметр top не указан, то он будет равным true.

Запрет прокрутки

Бывают ситуации когда бывает нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – таким образом, чтобы посетитель мог прокручивать это окно, но не сам документ.

Для того, чтобы запретить прокрутку страницы, достаточно поставить свойство document.body.style.overflow = «hidden».

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

Но вот недостатком этого способа является то, что собственно сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь оответственно эта ширина освободится, и содержимое страницы будет расширено, текст «прыгнет», заняв все освободившееся место.

Итоги

  • Для получения размеров видимой части окна используется свойство: document.documentElement.clientWidth/Height
  • Для получения размеров страницы с учётом прокрутки следует использовать:
  • Прокрутку окна вы можете получить как window.pageYOffset (для горизонтальной – window.pageXOffset) везде, кроме браузера IE8-. На всякий случай – вот вам самый кросс-браузерный способ, учитывающий, также и IE7- в том числе:
  • Установить прокрутку вы можете при помощи следующих специальных методов:
    • window.scrollTo(pageX,pageY) – абсолютные координаты,
    • window.scrollBy(x,y) – прокрутить относительно от текущего места.
    • elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.

Задачи

Прокрутка страницы

Реализуйте прокрутку страницы вниз, если пользователь нажал на определенный элемент.

Запрет прокрутки страницы

При клике на большое диалоговое окно запретите прокручивать остальную часть страницы.
Урок по прокрутке страницы на JavaScript

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Размер окна браузера в JavaScript

В JavaScript есть глобальные переменные с текущими значениями разрешения экрана, ширины и высоты браузера и сайта. Они доступны для вызова в любом месте кода и могут использоваться для решения задач, связанных с адаптацией работы под разные устройства.

document.body.clientWidth;
innerWidth;
outerWidth;
screen.availWidth.
screen.width;
document.body.clientHeight;
innerHeight;
outerHeight;
screen.availHeight.
screen.height;

« document.body.clientWidth » — ширина сайта, родительского элемента body.

« innerWidth » — внутренняя рабочая часть браузера с отображаемым сайтом.

« outerWidth » — размер с учётом полос прокрутки и рамок браузера.

« screen.width » — разрешение экрана по горизонтали.

« screen.availWidth » — доступная область эркана для окон. Не учитвает служебные панели операционной системы, например, панель задач в windows.

К последним 3 переменным иногда добавляют «window», это не играет роли и только удлиняет синтаксис. Например, «window.screen.width».

Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.

Высота экрана и окна в JavaScript

Все приведённые переменные работают и с высотой. Во всех случаях просто заменяется в названии «width» на «height».

  • document.body.clientHeight;
  • innerHeight;
  • outerHeight;
  • screen.height;
  • screen.availHeight.

Наименованя переменных чувствительно к регистру букв, поэтому вызывать их надо именно так как указано.

Высота и ширина на jQuery

Любители популярной библиотеки jQuery могут использовать другой синтаксис. Он может применяться как к браузеру, так и к любому элементу сайта.

    $(‘body’).w >Пример на jQuery:

Определение размеров страницы отчета и макета

При планировании отчета необходимо задать параметры страницы, а также размер бумаги и тип принтера, которые будут использоваться для распечатки отчета. Предполагается использовать лазерный принтер с форматом бумаги А4 (210×297 мм). После этого для настройки и получения распечатки желаемого вида можно использовать различные диалоговые окна и свойства.


Прежде всего, необходимо правильно выбрать тип принтера и характеристики макета страницы с помощью команды Файл → Параметры страницы. Это можно сделать, задав соответствующие значения в диалоговом окне Параметры страницы, (рис. 23).

В диалоговом окне Параметры страницы содержатся вкладки: Поля, Размер бумаги и Источник бумаги. Вкладка Поля делится на три части.

— Поля. Позволяет выбрать размеры полей страницы.

— Ориентация. Позволяет выбрать ориентацию страницы.

— Страницы. Позволяет выбрать метод работы со страницами.

Рис. 23. Диалоговое окно Параметры страницы с активизированной вкладкой Страница

Линейка с делениями по верхнему и левому краям окна отчета помогают планировать расположение данных на странице. Изменить размер любого отдела можно, перетащив его границу. В каждом разделе Access выводит сетку.

Для задания или изменения размеров отчета разместите курсор мыши на правой границе отчета (на границе белой страницы и серого фона) (рис. 22). При этом курсор мыши примет вид двунаправленной стрелки. Перетащите его для указания ширины отчета. При перетаскивании на линейке появится вертикальная линия, которая позволит точно задать ширину. Когда отчет примет нужные размеры, отпустите кнопку мыши. Будьте внимательны и не превышайте ширину страницы, заданную в диалоговом окне Параметры страницы

При размещении курсора мыши на нижней границе отчета он будет выглядеть так же, как и при задании ширины. С его помощью можно задать высоту нижнего колонтитула или другого раздела отчета, а не длину страницы. (Задавать длину страницы непосредственно в отчете не имеет смысла, поскольку длина области данных варьируется в зависимости от способа группировки). В режиме конструктора отчета на экране отображаются разделы отчета, а не весь отчет.

Для установки правой границы отчета на отметке 20 см выполните следующие действия.

1. Щелкните на правой границе отчета (на границе белой страницы и серого фона). Приэтом курсор мыши примет вид двунаправленной стрелки.

2. Перетащите эту границу к отметке 20 см.

3. Отпустите кнопку мыши.

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Сдача сессии и защита диплома — страшная бессонница, которая потом кажется страшным сном. 8771 — | 7143 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

Размеры (координаты) видимой части браузера.

Не offsetXXX, как оказалось.
Впрочем, за всю Одессу сказать не могу, но у меня, вроде, живет.

Вот это тестик нужно добить подходящим доктайпом и попробовать еще где-нибудь.

Цитата (ShurikA @ 23.12.2008, 11:30)
ksnk,

Вот в том то всё и дело, мне не нужны размеры body.

Мне нужну расмеры и координаты замого окна.

Цель: поставить div в центре окна, не body. про этом не важно какой в данный момент body. Даже если цлиент по середине контента, он должен увидить этот div.

так устр аивает?

впрочем, вариант всё равно не прокатит. хотя бы для ИЕ

Цитата (bars80080 @ 24.12.2008, 23:01 )
зачем js?

ShurikA, Ну, давайте еще раз
document.body.clientWidth — дает нам ширину видимого куска body, который, если сбросить установки и не воображать уж совсем странных случаев разметки, и есть размер видимой части экрана.
document.body.scrollLeft даст нам размер части, спрятанной за нижним скроллером.

примерно то-же самое для высоты.

Этих данных, по идее, должно хватить для монтажа дивчика по центру экрана.

Чем конкретно не устраивает именно body?

Цитата (ksnk @ 25.12.2008, 01:25 )
document.body.clientWidth — дает нам ширину видимого куска body,

А это не вся ширина body?

Цитата (ksnk @ 25.12.2008, 01:25 )
Чем конкретно не устраивает именно body?

Он же может быть значительно больше чем окно.

Или я чего то не допонимаю.

Даёт мне всю высоту body, вцлучая то что не водно тоже.

А это не вся ширина body?

Цитата (ShurikA @ 25.12.2008, 02:38 )

нет, только видимая часть. чтоб узнать всю, нужно смотреть offsetWidth

Цитата (mxt @ 25.12.2008, 11:50 )
нет, только видимая часть. чтоб узнать всю, нужно смотреть offsetWidth
Цитата (ShurikA @ 25.12.2008, 02:03 )
Выделить всёРазметка HTML

Даёт мне всю высоту body, вцлучая то что не водно тоже.

Начнем с того, что под видимой частью окна браузера имеется ввиду клиентская часть (viewport), где пользователь работает мышкой. Это для того, чтобы люди сразу понимали о чем речь.

AndreySamuylik,
эта функцая выдаёт мне правильную высоту, но всё относительно начала страницы. Так что если я проскролался вниз то центр моих координат (который я и ищу) до сих пор оказывается таким же если бы я оставался на самом верху страницы.

Добавлено позднее:
То есть мне нужно как то высчетать где я нахожусь на данный момент. На сколько я скролнулся вниз.

Получить размер экрана, текущей веб-страницы и окна браузера

Как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY , которые будут работать в все основные браузеры?

Вы можете получить размер окна или документа с помощью jQuery:

Для размера экрана вы можете использовать объект screen :

Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 20 раз различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры — если это так, вам нужно только следующее:

Вот кросс-браузерное решение с чистым JavaScript (Источник):

Не-jQuery способ получить доступный размер экрана. window.screen.width/height уже выставлен, но для отзывчивого веб-дизайна и полноты я считаю, что стоит упомянуть эти атрибуты:

availWidth и availHeight. Доступная ширина и высота на (исключая панели задач ОС и т.д.).

Но когда мы говорим о чувствительных экранах, и если мы по какой-то причине хотим обработать его с помощью jQuery,

дает правильное измерение. Даже удаляет лишнее пространство прокрутки, и нам не нужно беспокоиться о настройке этого пространства:)

Вы также можете получить ширину и высоту WINDOW, избегая панелей инструментов браузера и других вещей. Это реальная полезная область в окне браузера.

Для этого используйте: window.innerWidth и window.innerHeight свойства (см. документ в w3schools).

В большинстве случаев наилучшим способом является, например, отображение полностью централизованного плавающего модального диалога. Он позволяет вычислять позиции в окне, независимо от того, какая ориентация разрешения или размер окна используются браузером.

Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта с помощью «консоли» или после нажатия «Проверить» .

шаг 1: щелкните правой кнопкой мыши и нажмите «Осмотреть», а затем нажмите «Консоль»

Шаг 2. Убедитесь, что экран вашего браузера не находится в режиме максимизации. Если экран браузера находится в режиме максимизации, вам нужно сначала нажать кнопку максимизации (присутствовать либо в правом или левом верхнем углу), либо не максимизировать ее.

Шаг 3. Теперь напишите следующее после знака больше (‘ > ‘), т.е.

Если вам нужна действительно пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на картинке), вы можете захотеть использовать мой плагин jQuery.documentSize.

У него есть только одна цель: всегда возвращать правильный размер документа даже в сценариях, когда jQuery и другие методы fail. Несмотря на свое название, вам необязательно использовать jQuery — он написан в ванильном Javascript и работает без jQuery.

для глобального document . Для других документов, например. во встроенный iframe, к которому у вас есть доступ, передать документ в качестве параметра:

Обновление: теперь для размеров окна тоже

Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.

Это необходимо, потому что

  • $( window ).height() багги в iOS, с точки зрения бесполезности
  • $( window ).width() и $( window ).height() являются ненадежны на мобильных устройствах, поскольку они не ‘t обрабатывать эффекты мобильного масштабирования.


jQuery.documentSize предоставляет $.windowWidth() и $.windowHeight() , которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация.

Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер, и всякий раз, когда вы нажимаете на него, вы увидите размер в правом углу окна вашего браузера.

Здесь вы найдете информацию о том, как использовать букмарклет https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

Исходный код

Оригинальный код находится в кофе:

В основном код добавляет небольшой div, который обновляется при изменении размера вашего окна.

В некоторых случаях, связанных с отзывчивым макетом $(document).height() , можно возвращать неверные данные, отображающие только высоту порта просмотра. Например, когда какая-то оболочка div # имеет высоту: 100%, этот #wrapper может быть растянут каким-то блоком внутри него. Но высота по-прежнему будет напоминать высоту видового экрана. В такой ситуации вы можете использовать

Это представляет фактический размер обертки.

Я разработал библиотеку, чтобы узнать реальный размер видового экрана для настольных компьютеров и мобильных браузеров, поскольку размеры видовых экранов являются несогласованными на всех устройствах и не могут полагаться на все ответы этого сообщения (в соответствии со всеми исследованиями, которые я сделал об этом): https://github.com/pyrsmk/W

Иногда вам нужно увидеть изменения ширины и высоты при изменении размера окна и внутреннего содержимого.

Для этого я написал небольшую script, которая добавляет окно журнала, которое динамически контролирует все изменения размера и почти мгновенно обновляет.

Он добавляет допустимый HTML с фиксированной позицией и высоким z-индексом, но достаточно мал, поэтому вы можете:

  • используйте его на фактическом сайте
  • используйте его для тестирования мобильного/отзывчивого просмотры

Протестировано: Chrome 40, IE11, но очень возможно работать и с другими/более старыми браузерами. )

EDIT: Теперь стили применяются только к элементу таблицы журналов — не ко всем таблицам — также это решение без jQuery:)

Вы можете использовать объект Screen, чтобы получить это.

Ниже приведен пример того, что он будет возвращать:

Чтобы получить переменную screenWidth , просто используйте screen.width , то же самое с screenHeight , вы просто используете screen.height .

Чтобы получить ширину и высоту окна, это будет screen.availWidth или screen.availHeight соответственно.

Для переменных pageX и pageY используйте window.screenX or Y . Обратите внимание, что это от ОЧЕНЬ ЛЕВЫЙ/ТОП ВАШЕГО ВЛЕВО /TOP -est SCREEN. Поэтому, если у вас есть два экрана ширины 1920 , тогда окно 500px слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height , однако, отобразите ширину или высоту экрана CURRENT.

Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width() .

Снова используя jQuery, используйте $(«html»).offset().top и $(«html»).offset().left для ваших значений pageX и pageY .

вот мое решение!

Вот как мне удалось получить ширину экрана в React JS Project:

Если ширина равна 1680, вернуть 570, иначе вернуть 200

Теперь мы можем безопасно использовать собственное javascript-окно api во всех браузерах без контекста окна.

Синтаксис несколько ясен!

Чтобы получить точные результаты в каждом браузерах и устройствах, результаты должны быть умножены на devicePixelRatio.

Свойство свойства WindowPixelRatio возвращает отношение разрешения в физических пикселях к разрешению в пикселях CSS для текущего устройства отображения. Это значение также можно интерпретировать как отношение размеров пикселей: размер одного пикселя CSS к размеру одного физического пикселя. Говоря проще, это говорит браузеру, сколько фактических пикселей экрана должно использоваться для рисования одного пикселя CSS.

Это полезно при разнице между рендерингом на стандартном дисплее против дисплея HiDPI или Retina, который использует больше пикселей экрана для рисования одних и тех же объектов, что приводит к более четкому изображению.

Невозможно получить уведомление, когда это значение будет изменено (что может произойти, например, если пользователь перетаскивает окно на дисплей с другой плотностью пикселей). Поскольку для обнаружения изменений плотности пикселей не существует обратных вызовов или событий, единственный способ сделать это — периодически проверять значение devicePixelRatio, чтобы узнать, не изменилось ли оно. Просто не делайте этого слишком часто, или вы будете влиять на производительность.

Царский блог

Философия программирования

JavaScript: Геометрия элемента – позиция, размеры, прокрутка и перемещение

Как Web-программисту передо мной иногда возникают вопросы позиционирования и определение размеров элементов на HTML-странице или в HTML-документе. Приходится каждый раз копаться в книгах, парсить интернет и т.п. Вопросы на форумах я уже давно не задаю, так как по-моему почти все вопросы уже заданы и наша задача – найти правильные ответы на них.

И вот я решил соединить все полученные мной знания в этом посте, где я постараюсь подробно описать тему БЕЗ применения сторонних библиотек, таких как jQuery или Prototype, то есть мы будем использовать pure JavaScript, то есть чистый JavaScript, и код в принципе по идее должен корректно работать в большинстве браузеров, как старых так и новых версий.

Определяем позицию полос прокрутки

Как правило, для каждой страницы HTML существует две точки отсчёта координат, относительно которых мы получаем координаты мыши и элементов – это начало документа или страницы и левый верхний угол видимого окна, называемый иногда viewport, или просто window.

Например, при получении координат мыши мы можем обратиться к свойствам pageX,pageY – координаты отчёта от начала документа, и clientX,clientY – координаты относительно текущего окна (viewport или window). Т.о. если мы прокручмвали документ, эти координаты будут отличаться друг от друга, а нам надо привести всё к общему знаменателю для точного позиционирования элементов.

Для этого нам надо знать величины прокрутки, чтобы оттлакиваться уже от них, и поэтому пишем универсальную функцию getScrollOffsets, возвращающую эти значения и корректно работающую для практически всех браузеров:

Эту полезную функцию я взял из книги Флэнагана “JavaScript. Подробное руководство”, протестировал её и она реально работает.

Находим позицию элемента

Теперь мы без проблем сможем найти позицию элемента относительно документа (а не окна), используя универсальный метод getBoundingClientRect и прибавив значения полос прокрутки:

В этой функции мы добавили проверку на наличии в текущем агенте (т.е. браузере) читателя метода getBoundingClientRect(), и если его нет- используем второй вариант, менее надёжный, так как он не всегда возвращает правильные результаты для различных версий браузеров.

Но в принципе сегодня у всех агентах, что я тестировал эту функцию, присутствует getBoundingClientRect() метод, поэтому 2-ой вариант с использованием offset[Left,Top,Parent] можно наверное удалить.

Втискиваем элемент в видимую часть окна

Иногда нам бывает нужно, что бы создаваемый на лету элемент с абсолютным позиционированием влезал в пределы видимой части окна, то есть всегда был виден целиком, а не торчала какая-то его часть, если он был вызван где-нибудь у края окна.

Для этого нам нужно помимо того, что мы уже знаем, определять размеры элемента, а также размеры viewport’а (то есть текущие размеры окна).

Первое досигается легко за счёт offsetWidth,offsetHeight свойств элемента, а для второго нам опять-таки надо написать вспомогательную (helper) функцию.

Эту функцию я также взял из книги Флэнагана, с одним важным нюансом – Флэнаган пишет, что надо использовать свойства innerWidth,innerHeight, если они доступны (не в IE =7, Fx, Chrome, Opera,Safari (Windows 7).

Итак, теперь вписываем наш элемент в границы видимой части окна так:

Вуаля! Красиво и профессионально, как и должно быть.
Теперь перейдём к ещё одной вкусняшке – drag&drop, или в просторечье, буксировке.

Перетаскиваем элемент

Эту функциональность наверное правильно будет назвать просто dragging, то есть буксировка, перетаскивание с места на место, возможно, с какой-нибудь определенной целью или без оной.
Она осуществляется довольно просто и работает независимо от агента пользователя (которые понимают JavaScript и рендерят оконные страницы).

Сперва определимся с алгоритмом. Нам надо перехватывать три мышиных события – mousedown,mousemove и mouseup.

В первом (mousedown) – если оно произошло в пределах участка нашего элемента, предназначенного для его перетаскивания (этот может быть сам элемент целиком, либо, например, его заголовок) – мы фиксируем разницу между текущими координатами мыши и позицией левого верхнего угла нашего элемента, а также включаем условный флаг dragging, сигнализирующий о том, что мы готовы перемещать наш элемент.

Во втором событии (mousemove), если поднят флаг dragging, мы отнимаем полученные в обработчкие mousedown смещения от текущей позиции курсора и по ним позиционируем наш элемент.

В третьем, самом простом, но не менее важном обработчкике (mouseup) мы просто сбрасываем (опускаем) наш условный флаг dragging, сигнализируя, что перетаскивание элемента завершено.

Всё это простое действо может уместиться буквально в десятке строчек JavaScript-кода и реально работает!

Смотрите функциональный код с дополнительными короткими комментариями:

Замечу, что этот код позволяет перетаскивать виджет любой кнопкой мыши – как левой, так и правой и даже средней. Для предотвращения этого в обработчике mousedown проверяем флаг нажатой кнопки мыши (свойство события button: 0 – левая, 1 – средняя, 2 – правая) и действуем соответственно.

В заключении приведу функцию attach – кросс-браузерный вариант привязки обработчкиков событий.

Всё гениальное – просто. Нет, я не устану это повторять. пусть оно у меня в зубах завязнет. )))

Определяем ширину скролл-баров

Зачем это нужно? Вот и я думаю, зачем. Но когда я использовал оригинальную версию из книги Фланагана функции getViewportSize, как я уже упоминал, она возвращала размеры видимой части окна вместе с шириной скроллбаров (точнее, эти значения возвращали сво-ва innerWidth,innerHeight), и я решил идти напролом и найти ширину бордюра, чтобы отнимать её из полученных значений и корректно позиционировать свой элемент.

И я после недолгих поисков нарыл такую, видимо корректную функцию:

Но использование лишнего кода, тем более относительного длинного и замороченного (я сторонник минималистских и простых решений везде, где это возможно), было нежелательно для моего проекта, поэтому я нашёл способ определять размеры viewport’а без ширины полос (используя window.document.documentElement.[clientWidth,clientHeight], как я и писал выше), и эта функция мне в принципе не понадобилась, но на всякий случай я её здесь всё же привёл, вдруг когда-нибудь понадобится определить ширину полос скроллбара.

Крепкого чая, крепкой любви и крепкого счастья.

Илон Маск рекомендует:  Нейрокомпьютерная техника почему именно искусственные нейронные сети
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL