Объект window

212

посл. ред. 30.10.2016

Что такое BOM?

BOM (Browser Object Model) - объектная модель браузера.

BOM-интерфейс позволяет работать с окном браузера как с объектом, у которого имеются свои свойства и методы. Данным объектом является объект window (он же является глобальным объектом в JavaScript).

Некоторые браузеры открывают страницы не в отдельных окнах, а во вкладках одного окна. В этом случае каждая вкладка также имеет свой собственный объект window. Однако, при обращении к свойствам, которые не могут относиться к вкладкам (например, изменяющие размер окна браузера), автоматически используется общий объект window окна браузера. Например, если внутри отдельной вкладки происходит вызов метода window.resizeTo(), тогда window ссылается на общий объект окна браузера.

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

<html>
<head>
  <title>BOM-интерфейс</title>
</head>
<body>

</body>
</html>

<script>
  var all = '';
  for (var prop in window) {
    all += window.prop + '\n';
  }
  alert(all);
</script>

Далее приведены описания наиболее востребованных свойств и методов объекта window.

Свойства объекта `window`

Параметры окна

innerHeight: Высота видимой части страницы, включая горизонтальную полосу прокрутки, в пикселях. Соответствует значению, получаемому media-запросом screen в CSS.
innerWidth: Ширина видимой части страницы, включая вертикальную полосу прокрутки, в пикселях. Соответствует значению, получаемому media-запросом screen в CSS.
outerHeight: Полная высота окна браузера в пикселях.
outerWidth: Полная ширина окна браузера в пикселях.
pageXOffset: Величина горизонтальной прокрутки в пикселях. Альтернативное свойство window.scrollX.
pageYOffset: Величина вертикальной прокрутки в пикселях. Альтернативное свойство window.scrollY.
screenX: Смещение левой границы браузера относительно левого края экрана в пикселях (аналогия с CSS-свойством left).
screenY: Смещение верхней границы браузера относительно верхнего края экрана в пикселях (аналогия с CSS-свойством top).

Свойства-объекты

history: Объект для работы с журналом истории.
location: Объект для работы с URL страницы.
navigator: Объект, в котором содержится информация об используемом браузере.
screen: Объект, в котором содержится информация об экране используемого устройства.

Методы объекта `window`

Общие

alert(): Вызывает модальное окно с предупреждением.
confirm(): Вызывает модальное окно с сообщением, требующим подтверждение или отмену пользователем.
prompt(): Вызывает модальное окно, требующее ввода информации от пользователя.
getComputedStyle(): Возвращает объект, содержащий значения всех CSS-свойств, применённых к элементу (с учётом внешних файлов стилей и тега <style>).
getSelection(): Возвращает ссылку на объект для работы с выделенными элементами страницы.
print(): Открывает меню для печати документа.
stop(): Останавливает загрузку страницы.

Новое окно

open(): Открывает новое окно.
close(): Закрывает окно, открытое с помощью метода window.open(). Закрыто ли окно, можно узнать из булевого свойства closed.
moveBy(): Позволяет перемещать окно относительно текущего положения. Аргументами указываются горизонтальное и вертикальное смещение относительно текущего (аналогия с CSS-свойством position: relative). Окно обязательно должно быть открыто с помощью метода window.open() и иметь не более одной вкладки.
moveTo(): Позволяет перемещать окно относительно экрана. Аргументами указываются горизонтальная и вертикальная координаты относительно верхнего левого угла экрана (аналогия с CSS-свойством position: fixed). Окно обязательно должно быть открыто с помощью метода window.open() и иметь не более одной вкладки.
resizeBy(): Позволяет изменять размер окна относительно текущего. Аргументами указываются изменение ширины и высоты окна относительно текущего. Окно обязательно должно быть открыто с помощью метода window.open() и иметь не более одной вкладки.
resizeTo(): Позволяет изменять размер окна в абсолютных величинах. Аргументами указываются ширина и высота окна в пикселях. Окно обязательно должно быть открыто с помощью метода window.open() и иметь не более одной вкладки.

Таймеры

setTimeout(): Один раз запускает переданную функцию через заданное время.
clearTimeout(): Отменяет выполнение действий, установленных с помощью window.setTimeout(). Аргументом указывается идентификатор, полученный при вызове setTimeout().
setInterval(): Многократно запускает переданную функцию с заданным интервалом времени.
clearInterval(): Останавливает повторное выполнение действий, установленных с помощью window.setInterval(). Аргументом указывается идентификатор, полученный при вызове setInterval().

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

scroll(): Позволяет прокрутить окно в заданное место. Аргументами указываются прокрутка по оси X и оси Y относительно всего документа в пикселях.
scrollBy(): Позволяет прокрутить окно относительно текущего положения. Аргументами указываются величины прокрутки по оси X и оси Y относительно текущего положения в пикселях.
scrollTo(): Аналогичен методу scroll().