Browser Object Model

window

window – самый главный объект в браузере, который отвечает за одно из окон (вкладок) браузера. Он является корнем иерархии всех объектов доступных веб-разработчику в сценариях JavaScript. Объект window кроме глобальных объектов (navigator, history, location, screen, document и др.) имеет собственные свойства и методы, которые предназначены для:

• открытия нового окна (вкладки);
• закрытия окна (вкладки);
• распечатывания содержимого окна (вкладки);
• передачи фокуса окну или для его перемещения на задний план (за всеми окнами);
• управления положением и размерами окна, а также для осуществления прокручивания его содержимого;
• изменения содержимого статусной строки браузера;
• взаимодействия с пользователем посредством следующих окон: alert (для вывода сообщений), confirm (для вывода окна, в котором пользователю необходимо подтвердить или отменить действия), prompt (для получения данных от пользователя);
• выполнения определённых действий через определённые промежутки времени(работа с таймером) и др.

Если в браузере открыть несколько вкладок (окон), то браузером будет создано столько объектов window, сколько открыто этих вкладок (окон). Т.е. каждый раз открывая вкладку (окно), браузер создаёт новый объект window связанный с этой вкладкой (окном).

Методы: open(), close(), print(), focus() и blur().

Методы глобального объекта window предназначенные для открытия, закрытия, печати окная, передачи и удаления фокуса на окно.

window.open()

Создает и открывает новое окно.

	var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
				

В первом параметре указывается URL страницы, которую необходимо загрузить в это окно. Если значение данного параметра не задавать, то в окне будет отображена пустая страница (about:blank).

Во втором параметре указывается значение атрибута target или имя окна. Поддерживаются следующие значения:

• _blank - URL загружается в новое окно (вкладку). Это значение используется по умолчанию;
• _parent - URL загружается в родительский фрейм. Если его нет, то URL загружается в текущее окно (вкладку);
• _self - URL загружается в текущее окно;
• _top - отменяет все фреймы и загружает URL в текущее окно (вкладку) браузера. Если его нет, то URL загружается в текущее окно (вкладку);
• В качестве параметра Вы также можете указать имя открываемого окна. Данное имя является внутренним и может использоваться для вызова функций и методов этого окна.

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

• left, top - координаты (в пикселях) левого верхнего угла окна браузера относительно левого верхнего угла экрана. Значения этих свойств должны быть положительными или равными 0;
• height, width — высота и ширина рабочей области окна браузера. При указании значений необходимо учитывать, что ширина и высота окна браузера не может быть меньше 100 пикселей;
• resizable — логическое свойство окна, которое предназначено для включения или выключения возможности изменения размеров окна браузера. Данное свойство принимает следующие значения: yes или 1, и no или 0;
• scrollbars - логическое свойство окна, которое предназначено для включения или выключения отображение полос прокрутки для содержимого окна браузера. Данное свойство принимает следующие значения: yes или 1, и no или 0;
• status - логическое свойство окна, которое предназначено для включения или выключения отображения статусной строки браузера. Данное свойство принимает следующие значения: yes или 1, и no или 0;

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

window.close()

Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open().

codepen.io ограничивает работу некоторых методов объекта window, по этому закрыть окно не получиться, но сам код рабочий.Пример 1

window.print()

Данный метод печатает содержимое текущего окна. Не имеет параметров.

window.focus()

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

window.blur()

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

Свойства объекта window: name, opener, closed

window.name

Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.

Внутреннее имя окна, это не строка, заключённая между открывающим и закрывающим тегом <title> - это имя окна которое предназначено для разработчика. Т.е. данное имя невидимо для пользователя.

Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target. Если элемент <а> имеет атрибут target="searchWindow", то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем (searchWindow), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow. А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке <а> этом окне. По умолчанию окна <а> браузере не имеют внутреннего имени.

window.opener

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

window.closed

Свойство closed возвращает логическое значение, указывающее закрыто окно или нет.

    if (win.closed)
        alert ("Окно закрыто"); 
    else
        alert ("Окно открыто");
				

Методы для перемещения окна

В JavaScript для перемещения окна доступны метод moveTo() и moveBy()

window.moveTo()

Метод предназначен для перемещения левого верхнего угла окна в указанную точку экрана.

	window.moveTo(x, y);
				

Параметры

• x - число (количество пикселей), которое задаёт горизонтальную координату левого верхнего угла окна браузера относительно верхнего левого угла экрана дисплея.
• y - число(количество пикселей), которое задаёт вертикальную координату левого верхнего угла окна браузера относительно верхнего левого угла экрана дисплея.

window.moveBy()

Метод предназначен для перемещения окна на указанное количество пикселей относительно его текущего положения.

Параметры

• x - положительное или отрицательное целое число, которое указывает количество пикселей, на которые необходимо переместить окно браузера относительно его текущего положения в горизонтальном направлении.
• y - положительное или отрицательное целое число, которое указывает количество пикселей, на которые необходимо переместить окно браузера относительно его текущего положения в вертикальном направлении.

Методы для изменения размеров окна

В JavaScript для изменения размеров окна предназначен метод resizeTo() и метод resizeBy().

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

window.resizeTo()

Метод изменяет размер окна до указанной ширины и высоты.

	window.resizeTo(width, height);
				

Параметры

• width - устанавливает ширину окна браузера в пикселях.
• height - устанавливает высоту окна браузера в пикселях.

window.resizeBy()

Метод изменяет размер окна на указаную величину величину.

	window.resizeBy(xDelta, yDelta);
				

Параметры

• xDelta - увеличивает или уменьшает ширину окна браузера на указанное количество пикселей.
• yDelta - увеличивает или уменьшает высоту окна браузера на указанное количество пикселей.

Методы, предназначенные для прокрутки документа внутри окна

В JavaScript для прокрутки HTML документа доступны методы scrollTo() и scrollBy().

window.scrollTo()

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

	window.scrollTo(x-coord, y-coord);
				

Параметры

• x-coord - укоордината вдоль оси X, до которой необходимо прокрутить документ в горизонтальном направлении.
• y-coord - координата вдоль оси Y, до которой необходимо прокрутить документ в вертикальном направлении.

window.scrollBy()

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

	window.scrollBy(x, y);
				

Параметры

• x - указывает количество пикселей, на которое необходимо прокрутить документ в горизонтальном направлении относительно его текущего положения. Положительное значение данного параметра прокручивает документ вправо, в то время как отрицательное значение влево.
• y - указывает количество пикселей, на которое необходимо прокрутить документ в вертикальном направлении относительно его текущего положения. Положительное значение данного параметра прокручивает документ вниз, в то время как отрицательное значение вверх.

Свойства innerWidth, outerWidth и др.

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

window.innerWidth и window.innerHeight

Данные свойства предназначены для получения размеров видимой рабочей области окна браузера. Т.е. свойства innerWidth и innerHeight предназначены для получения значений ширины и высоты области, в которой отображается HTML-документ. Эти свойства доступны только для чтения и возвращают значения в пикселях.

window.outerWidth и window.outerHeight

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

window.screenLeft (screenX) и window.screenTop (screenY)

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

При этом свойства screenLeft и screenTop работают в Internet Explorer, а свойства screenX и screenY в Mozilia Firefox. В браузерах Chrome, Safari и других подобных браузерах можно использовать как свойства screenLeft и screenTop, так и свойства screenX и screenY.

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

window.pageXOffset (scrollX) и window.pageYOffset (scrollX)

Они предназначены для получения количества пикселей, на которые документ был прокручен в горизонтальном pageXOffset или вертикальном pageYOffset направлении относительного левого верхнего угла окна. Свойства scrollX и scrollY эквиваленты соответственно свойствам pageXOffset и pageYOffset. Эти свойства доступны только для чтения.

Пример 2. Свойства окна

location

location - объект, который отвечает за адресную строку текущего документа, с которым он связан. Данный объект содержит свойства и методы, которые позволяют: получить текущий адрес страницы браузера, перейти по указанному URL, перезагрузить страницу и т.п.

Доступ к данному объекту осуществляется как к свойству объекта window, т.е. через точку.

    var loc = window.location;
			

Свойства объекта location

• hash - устанавливает или возвращает якорную часть (#) URL
• host - устанавливает или возвращает имя хоста и номер порта URL
• hostname - устанавливает или возвращает имя хоста URL
• href - устанавливает или возвращает содержимое URL
• origin - возвращает протокол, имя хоста и номер порта URL
• pathname - устанавливает или возвращает часть URL, содержащей путь
• port - устанавливает или возвращает номер порта URL
• protocol - устанавливает или возвращает протокол URL
• search - устанавливает или возвращает часть URL, содержащей строку с параметрами (?параметр1=значение1&параметр2=значение2&...)

1. location.protocol - http:
2. location.hostname - itchief.ru
3. location.pathname - /search
4. location.search - ?q=bootstrap
5. location.hash - #part2

Примечание: Изменение URL или какой либо её части с помощью свойств объекта location приводит к немедленному переходу к этому URL в текущем окне, или в том окне или вкладке браузера, для которого этот объект был вызван.

Методы объекта location

• assign() - загружает новый документ в текущее окно (вкладку) браузера или в то окно для которого этот метод был вызван
• reload() - перезагружает текущий документ. Метод reload() имеет один необязательный параметр булевского типа. Если в качестве параметра указать значение true, то страница будет принудительно обновлена с сервера. А если параметр не указывать или использовать в качестве параметра значение false, то браузер может обновить страницу, используя данные своего кэша. Метод reload() "имитирует" нажатие кнопки обновить в браузере
• replace() - заменяет текущий документ на документ, расположенный по адресу, переданному методу в качестве аргумента. Отличие от метода assign() заключается в том, что после использования replace() текущая страница удаляется из истории посещения текущего окна, это значит что пользователь не сможет вернуться на нее нажав кнопку назад в браузере.
• toString() - возвращает строковое представление URL.

Пример 3. Загрузка и замена документов

navigator

navigator - информационный объект, являющийся свойством объекта window, доступным во всех браузерах, с помощью которого можно получить общую информацию о браузере.

Браузер содержит информацию следующего характера:

• информацию о самом браузере в виде строки (User Agent);
• внутреннее "кодовое" и официальное имя браузера;
• версию и язык браузера;
• информацию о сетевом соединении и местоположении устройства пользователя;
• информацию об операционной системе и многое другое.

Вероятно самый распространенный способ использования объекта navigator - получение информации о браузере.

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

Свойства объекта navigator

• appName - возвращает имя браузера
• appVersion - возвращает информацию о версии браузера
• cookieEnabled - определяет включены ли cookies в браузере
• geolocation - возвращает объект Geolocation, который используется для определения местоположения пользователя
• language - возвращает какой язык используется в браузере
• online - определяет находиться ли браузер в режиме онлайн
• platform - возвращает название платформы, в которой браузер работает
• product - возвращает имя движка, на котором работает браузер
• userAgent - озвращает строку user agent, которая содержит информацию об браузере. Она используется в качестве заголовка, который браузер посылает на сервер

history

history – объект, который позволяет получить историю переходов пользователя по ссылкам в пределах одного окна (вкладки) браузера. Так как он является свойством объекта window, то у каждой вкладки в браузере будет свой объект window и свой объект history.

Данный объект отвечает за браузерные кнопки Вперёд и Назад. Объект history не предоставляет возможности читать историю посещений. Можно отправить посетителя назад или вперед, но сами адреса браузер не даёт из соображений безопасности.

С помощью методов объекта history можно имитировать нажатие на эти кнопки, а также переходить на определённое количество ссылок в истории вперёд или назад. Кроме этого, с появлением HTML5 History API веб-разработчику стали доступны методы для добавления и изменения записей в истории, а также событие, с помощью которого можно обрабатывать нажатие кнопок forward (вперёд) и back (назад).

Свойства и методы объекта history

• history.length - возвращает количество элементов в сессии истории текущего окна (вкладки). Другими словами, данное свойство возвращает количество переходов, которые Вы можете выполнить в пределах текущего окна как вперед, так и назад. Данное свойство доступно только для чтения.
• history.go() - он позволяет переместить пользователя на некоторое количество страниц вперёд или назад по истории. Метод history.go() имеет один обязательный параметр - это число, на которое надо переместить пользователя вверх или вниз по истории. Например, history.go(2) - осуществляет перемещения пользователя на 2 шаг назад, a history.go(-2) на 2 шага вперёд. Если в качестве параметра указать значение 0, то данный метод вызовет перезагрузку страницы. Если указать в качестве значение число, которое превышает количество шагов, которые может совершить пользователь в текущем окне, то ни чего не произойдёт.
• history.back() - осуществляет перемещение пользователя на одну страницу назад по истории, т.е. он программно имитирует нажатие кнопки Назад в браузере. Также метод history.back() можно выполнить с помощью метода history.go(-1).
• history.forward() - осуществляет перемещение пользователя на одну страницу вперёд по истории, т.е. он программно "имитирует" нажатие кнопки Вперёд в браузере. Также метод history.forward() можно выполнить с помощью метода history.go(1).

screen

screen – объект, который предоставляет информацию об экране пользователя: разрешение экрана, максимальную ширину и высоту, которую может иметь окно браузера, глубина цвета и т.д.

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

Объект screen по большей части используется для сбора статистической информации о посетителях. Именно с помощью него можно просматривать в статистике, сколько посетителей приходило с каким экраном.

Свойства width и height объекта screen

Свойства screen.width и screen.height возвращают соответственно ширину и высоту экрана пользователя в пикселях.

Свойства availWidth и availHeight объекта screen

Свойства screen.availWidth и screen.availHeight возвращают ширину и высоту, которое может занять окно браузера. Например, в операционной системе Windows свойство screen.availHeight равно разнице между высотой экрана и высотой "Панели задач".