Window.location

elementFromPoint(x, y)

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

Синтаксис:

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

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

Для координат за пределами окна метод возвращает

Метод работает, только если координаты относятся к видимой части содержимого окна.

Если любая из координат представляет собой отрицательное число или превышает размеры окна, то возвращается .

Вот типичная ошибка, которая может произойти, если в коде нет соответствующей проверки:

The getCurrentPosition() Method — Return Data

The method returns an object on success. The latitude,
longitude and accuracy properties are always returned. The other properties are returned
if available:

Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Демо улучшенного варианта

На демо находятся 3 вложенных ‘а. Все они с , некоторые с .

Клик на внутреннем отображает значения , а также показывает координаты курсора на момент клика: .

Координаты выводятся сразу под ‘ами.

На момент написания статьи демо работает в IE6+,Firefox 3+ и Opera 9.62+.

Сравнить getOffsetSum и getOffsetRect

getOffsetSum:значение getOffsetSum()

getOffsetRect:значение getOffsetRect()

event:координаты клика мышью относительно документа

Обратите внимание: результаты и не во всех браузерах совпадают. Чтобы увидеть, какой вариант правильный — кликните на самой верхней-левой точке элемента (на самом верхнем-левом уголке черной рамки)

Чтобы увидеть, какой вариант правильный — кликните на самой верхней-левой точке элемента (на самом верхнем-левом уголке черной рамки).

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

Окна на поддоменах: document.domain

По определению, если у двух URL разный домен, то у них разный источник.

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

Для этого в каждом таком окне нужно запустить:

После этого они смогут взаимодействовать без ограничений. Ещё раз заметим, что это доступно только для страниц с одинаковым доменом второго уровня.

Когда ифрейм – с того же источника, мы имеем доступ к документу в нём. Но есть подвох. Не связанный с кросс-доменными особенностями, но достаточно важный, чтобы о нём знать.

Когда ифрейм создан, в нём сразу есть документ. Но этот документ – другой, не тот, который в него будет загружен!

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

Вот, взгляните:

Нам не следует работать с документом ещё не загруженного ифрейма, так как это не тот документ. Если мы поставим на него обработчики событий – они будут проигнорированы.

Как поймать момент, когда появится правильный документ?

Можно проверять через :

The getCurrentPosition() Method — Return Data

The method returns an object on success. The latitude,
longitude and accuracy properties are always returned. The other properties are returned
if available:

Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

Методы

Этот интерфейс наследует методы от интерфейса  и реализует свойства  и .

Отображает предупреждающее диалоговое окно.
Возвращается на один шаг назад в истории окна.
Убирает фокус с окна.
Позволяет отменить функцию обратного вызова прежде чем определить расписание ее выозва с .
Регестрирует окно, которое будет перехватывать все события опереденного типа.
Отменяет повторяющееся исполнение, установленное с помощью .
Отменяет повторяющееся исполнене, установленное с помощью .
Отменяет повторяющееся исполнене, установленное с помощью .
Закрывает текущее окно.
Отображает диалог с сообщением, на которое пользователь должен ответить.
Вышла из употребления с версии Gecko 24
FIXME: NeedsContents
Используется для вызова события.
Отправляет сообщение в консоль.
Вышла из употребления с версии Gecko 24
FIXME: NeedsContents
Ищет необходимую строку в окне window.
Устанавливает фокус на текущем окне.
Переходит на один документ вперед в текущей истории окна.
Заставляет мигать иконку приложения.
FIXME: NeedsContents
Получает подсчитанные стили для определенного элемента. Подсичтанные стили включают подсчитанные занчения всех CSS свойств элемента.
Получает подсчитанные стили по умолчанию для определенного элемента, игнорируя авторские стили.
Возвращает выбранный объект, представляющий выбранный элемент(ы).
Возаращает браузер на домашнюю страницу.
Возвращает объект , представляющий указанную строку медиа-запроса.
FIXME: NeedsContents
(top-level XUL windows only)
Минимизирует окно.
Сдвигает текущее окно на определенное значение.
Сдвигает окно до определенных координат.
Cообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие   прежде чем произойдет перерисовка .
Открывает новое окно.
Opens a new dialog window.
Предоставляет безопасный способ для одного окна передать строку с данными в другое окно, которое должно находиться в пределах того же домена, что и первое.
Открывет Print Dialog для распечатки текущего документа.
Возвращает текст, введенный пользователем в диалоге подсказки.
Возвращает окно с захваченных событий определенного типа.
Удаляет слушателя события из окна.
Позволяет назначить раписание задачь во время периода простоя браузера.
Меняет размер текущего окна на определенное число.
Динамически меняет размер окна.
FIXME: NeedsContents
Вышла из употребления с версии Gecko 24
FIXME: NeedsContents
Scrolls the window to a particular place in the document.
Прокручивает документ в окна на данное число.
Прокурчивает документ на данное число строк.
Прокурчивает документ на данное число стараниц.
Прокручивает до заданных координат в документе.
Меняет курсор для текущего окна.
Исполняет функцию после того, как браузер некую тяжелую задачу.
Назначает выполнение функции каждые X миллисекунд.
FIXME: NeedsContents
Устанавливает отложенное выполнение функции.
Отображает модальный диалог.
Подгоняет размер окна под его содержимое.
Останавливает загрузку страницы.
Обновляет состояние команд текущего окна chrome (UI).

Регестрирует обработчики опреленного типа событий в окне.

Декодирует строку данных, которая была закодирована, используя кодировку base-64.

Создаеь закодированную base-64 ASCII строку из строки бинарных данных.

Отменяет повторяющееся исполнение, установленного с помощью .

Отменяет отложенное исполнение, установленного с   .

Принимает множество различных изображений и возвращает , который возвращает . Опционально ресурс может быть обрезан до прямоугольника, заданного в пикселях (sx, sy) с шириной sw и высотой sh.

Начинает процесс загрузки ресурса из сети.

Удаляет слушателя события из окна.

Устанавливает раписание для исполнения функции каждый раз через заданное число миллисекунд.

Устанавливает расписание для исполнения функции в назначенное время.

Обмен сообщениями между окнами

Интерфейс позволяет окнам общаться между собой независимо от их происхождения.

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

Интерфейс имеет две части.

Окно, которое хочет отправить сообщение, должно вызвать метод postMessage окна получателя. Другими словами, если мы хотим отправить сообщение в окно , тогда нам следует вызвать .

Аргументы:

Данные для отправки. Может быть любым объектом, данные клонируются с использованием «алгоритма структурированного клонирования». IE поддерживает только строки, поэтому мы должны использовать метод на сложных объектах, чтобы поддержать этот браузер.
Определяет источник для окна-получателя, только окно с данного источника имеет право получить сообщение.

Указание является мерой безопасности. Как мы помним, если окно (получатель) происходит из другого источника, мы из окна-отправителя не можем прочитать его . Таким образом, мы не можем быть уверены, какой сайт открыт в заданном окне прямо сейчас: пользователь мог перейти куда-то, окно-отправитель не может это знать.

Если указать , то мы можем быть уверены, что окно получит данные только в том случае, если в нём правильный сайт

Особенно это важно, если данные конфиденциальные

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

Если мы не хотим проверять, то в можно указать .

Чтобы получать сообщения, окно-получатель должно иметь обработчик события (сообщение). Оно срабатывает, когда был вызван метод (и проверка пройдена успешно).

Объект события имеет специфичные свойства:

Данные из .
Источник отправителя, например, .
Ссылка на окно-отправитель. Можно сразу отправить что-то в ответ, вызвав .

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

Вот пример:

Полный пример:

Результат
iframe.html
index.html

Без задержек

Между и событием не существует задержки. Событие происходит синхронно, быстрее, чем .

Методы переадресации JavaScript

В JavaScript window location или объект location используется, чтобы получить информацию о местоположении текущей веб-страницы (документа), а также для его изменения. Ниже приведен список способов, которые могут быть использованы для реализации переадресации JavaScript:

//Устанавливает новое местоположение текущего окна.
window.location = "http://www.example.com";
//Устанавливает новую гиперссылку (URL) для текущего окна.
window.location.href = "http://www.example.com";
// Присваивает новый URL текущему окну. 
window.location.assign("http://www.example.com");
//Заменяет положение текущего окна на новое. 
window.location.replace("http://www.example.com");
//Задает местоположение самого текущего окна. 
self.location = "http://www.example.com";
// Задает положение самого верхнего окна относительно текущего.
top.location = "http://www.example.com";

Хотя приведенные выше строки JavaScript кода выполняют схожую работу, у них есть небольшие отличия. Например, если вы используете перенаправление top.location внутри элемента iframe, то это принудительно перенаправит на главное окно. Еще один момент, о котором стоит помнить: location.replace() заменяет текущий документ, удаляя его из истории и делая его недоступным с помощью кнопки «Назад» в браузере.

Для реализации кроссбраузерности мы рекомендуем использовать следующий код JavaScript windows location:

window.location.href = "http://www.example.com";

Также вы можете зайти на эту страницу, чтобы подробнее узнать, как работает window.location.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Переадресация JavaScript: перенаправление со страницы после события или действия пользователя

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

<script>
// Проверяем, верно ли условие, и затем перенаправляем. 
if ( ... ) {
  window.location.href = "http://www.example.com";
}
</script>

Приведенный выше код JavaScript document location href выполнит перенаправление, если условие верно:

<script>
// событие onclick присвоено элементу #button.
document.getElementById("button").onclick = function() {
  window.location.href = "http://www.example.com";
};
</script>

Приведенный выше код выполнит перенаправление, когда пользователь нажмет на элемент #button.

Так работает переадресация в JavaScript. Надеемся, эти примеры помогут вам в организации переадресации веб-страниц.

Данная публикация является переводом статьи «JavaScript Redirect: How to Redirect a Web Page with JavaScript» , подготовленная редакцией проекта.

Координаты относительно окна: getBoundingClientRect

Метод возвращает координаты в контексте окна для минимального по размеру прямоугольника, который заключает в себе элемент , в виде объекта встроенного класса .

Основные свойства объекта типа :

  • – X/Y-координаты начала прямоугольника относительно окна,
  • – ширина/высота прямоугольника (могут быть отрицательными).

Дополнительные, «зависимые», свойства:

  • – Y-координата верхней/нижней границы прямоугольника,
  • – X-координата левой/правой границы прямоугольника.

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

Если вы прокрутите страницу, то расположение кнопки в окне поменяется, и, соответственно, её координаты в контексте окна тоже (при вертикальной прокрутке – ).

Вот картинка с результатами вызова :

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

Заметим:

  • Координаты могут считаться с десятичной частью, например . Это нормально, ведь браузер использует дроби в своих внутренних вычислениях. Мы не обязаны округлять значения при установке .
  • Координаты могут быть отрицательными. Например, если страница прокручена так, что элемент ушёл вверх за пределы окна, то вызов вернёт отрицательное значение.

Зачем вообще нужны зависимые свойства? Для чего существуют , если есть ?

С математической точки зрения, прямоугольник однозначно задаётся начальной точкой и вектором направления .

Так что дополнительные зависимые свойства существуют лишь для удобства.

Что же касается , то они на самом деле не всегда равны . Технически, значения могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом.

То есть, отрицательные значения означают, что прямоугольник «растет» влево-вверх из правого угла.

Вот прямоугольник с отрицательными и (например, , ):

Как вы видите, свойства при этом не равны .

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

Internet Explorer и Edge: не поддерживают

Internet Explorer и Edge не поддерживают свойства по историческим причинам.

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

Координаты right/bottom отличаются от одноимённых CSS-свойств

Есть очевидное сходство между координатами относительно окна и CSS .

Но в CSS свойство означает расстояние от правого края, и свойство означает расстояние от нижнего края окна браузера.

Если взглянуть на картинку выше, то видно, что в JavaScript это не так. Все координаты в контексте окна считаются от верхнего левого угла, включая .

Попытка 2: getBoundingClientRect

Этот малоизвестный метод по стандарту должен быть у каждого элемента DOM.

На момент написания статьи он реализован в SVN у Webkit. Для нас это значит, что Chrome и Safari с его поддержкой будут готовы уже скоро.

Он возвращает прямоугольник, ограничивающий элемент.

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

Координаты элемента на странице — это левый-верхний угол прямоугольника + прокрутка страницы.

Код обработчика :

var br=this.getBoundingClientRect()
alert("Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom)

Как работает ?

По стандарту CSS любое содержимое находится внутри некоторого прямоугольника: css box.

В случае с блочными элементами, например — этим прямоугольником яляется сам элемент. Такой прямоугольник называют block box.
Если элемент строчный, например, длинный текст — он уже может быть не такой простой формы, а требует для отображения нескольких прямоугольников anonymous box. Обо всем этом подробно об этом написано в стандарте: .

Так что содержание элемента DOM может находится как в одном, так и в нескольких прямоугольниках css box.

Можно получить список всех прямоугольников, соответствующих , вызовом . Здесь IEgetClientRects() нам не нужен.

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

На основе метода мы можем сделать новый вариант функции:

function getOffsetRect(elem) {
    // (1)
    var box = elem.getBoundingClientRect()
    
    // (2)
    var body = document.body
    var docElem = document.documentElement
    
    // (3)
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    
    // (4)
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    
    // (5)
    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    
    return { top: Math.round(top), left: Math.round(left) }
}
  1. Получить ограничивающий прямоугольник для элемента.
  2. Задать две переменных для удобства
  3. Вычислить прокрутку документа. Все браузеры, кроме IE, поддерживают , а в IE, при наличии DOCTYPE прокрутка вычисляется либо на , иначе на — что есть то и берем
  4. Документ( или ) бывает сдвинут относительно окна (IE). Получаем этот сдвиг.
  5. Прибавляем к координатам относительно окна прокрутку и вычитаем сдвиг , чтобы получить координаты относительно документа

Для Firefox дополнительно мы округляем координаты вызовом .

Попытка 1. Суммируем offset’ы

Логика этого подхода довольно проста.

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

В качестве обычно выступает родитель . Но это не всегда так.

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

Наиболее подробно это описано в стандарте CSS: . Этот самый «containing block» — как раз и определяет , от которого отсчитывается позиция элемента.

Как браузер находит

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

  • элемент, у которого — не (значение по умолчанию)
  • элементы table,th,td — если

У элемента никогда нет .

В IE 7+/Opera у элементов с нет .

Сдвиг относительно ‘а задается свойствами :

Остается пройтись по всем и просуммировать сдвиги. Последним обычно является :

function getOffsetSum(elem) {
    var top=0, left=0
    while(elem) {
        top = top + parseFloat(elem.offsetTop)
        left = left + parseFloat(elem.offsetLeft)
        elem = elem.offsetParent        
    }
    
    return {top: Math.round(top), left: Math.round(left)}
}

Основных проблем с этим кодом две.

  1. Он слегка глючит, в разных браузерах — по-разному. Есть проблемы с border’ами элементов, ошибки при прокрутке внутри элементов и некоторые другие.
  2. Он медленный. Каждый раз приходится пройти всю цепочку ‘ов.

Вместо того, чтобы писать длинный кроссбраузерный код с разбором багов, который уж точно везде работает корректно, рассмотрим альтернативное решение, которое мало того что соответствует стандарту — его отлично поддерживают Internet Explorer 6+, Firefox 3+ и Opera 9.62+.

Получение координат

К сожалению, готовой функции для получения координат элемента относительно страницы нет. Но её можно легко написать самим.

Эти две системы координат жёстко связаны: .

Наша функция будет брать результат и прибавлять текущую прокрутку документа.

Результат : объект с координатами

Если нужно поддерживать более старые IE, то вот альтернативный, самый кросс-браузерный вариант:

Разберём что и зачем, по шагам:

  1. Получаем прямоугольник.
  2. Считаем прокрутку страницы. Все браузеры, кроме IE8- поддерживают свойство . В более старых IE, когда установлен DOCTYPE, прокрутку можно получить из , ну и наконец если DOCTYPE некорректен – использовать .
  3. В IE документ может быть смещён относительно левого верхнего угла. Получим это смещение.
  4. Добавим прокрутку к координатам окна и вычтем смещение , чтобы получить координаты нужного нам элемента.

Есть альтернативный способ нахождения координат – это пройти всю цепочку от элемента вверх и сложить отступы .

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

Вот функция, реализующая такой подход.

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

Вы можете увидеть разницу между вычислением координат через и на примере.

В прямоугольнике ниже есть 3 вложенных . Все они имеют , кое-кто из них имеет .

Кликните по внутреннему (жёлтому) элементу, чтобы увидеть результаты обоих методов: и , а также реальные координаты курсора – (мы обсудим их позже в статье Мышь: IE8-, исправление события).

Кликните, чтобы получить координаты getOffsetSum и getCoords

getOffsetSum:значение getOffsetSum()

getCoords:значение getCoords()

mouse:координаты мыши

При клике на любом месте жёлтого блока вы легко увидите разницу между и .

Для того, чтобы узнать, какой же результат верный, кликните в левом-верхнем углу жёлтого блока, причём обратите внимание – кликать нужно не на жёлтом, а на чёрном, это рамка, она тоже входит в элемент. Будут видны точные координаты мыши, так что вы можете сравнить их с

Пример клика в правильном месте (обратите внимание на разницу координат):

Именно всегда возвращает верное значение.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий