Объект Window в JavaScript. Что это и зачем нужен. Блог 5.

При открытии окна в браузере, браузер всегда создает глобальный объект window. Он представляет окно браузера. С помощью этого объекта JavaScript общается со страничкой. Берет информацию из нее, реагирует на события, выводит результаты обработки данных.
Window является Browser Object Model. Эта модель не стандартизована, и это означает, что каждый браузер по своему ее понимает и реализует.


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

Все глобальные объекты, функции, переменные в JavaScript, созданные в рамках окна браузера автоматически становятся частью объекта windowГлобальные переменные — это свойства window. Глобальные функции — это методы window. К ним можно обратится через этот объект, он в иерархии выше всех.
Одним из самых важных свойств объекта window — это свойство document, которое в свою очередь тоже является объектом. Этот объект представляет HTML дерево элементов (DOM), он владелец всех элементов на странице. Каждый элемент этого дерева тоже является объектом имеющим свойства и методы.
Для того чтобы обратится к свойству document объекта window, можно написать так:

window.document.getElementById("header");

Тут мы обращаемся к document, и с помощью метода getElementById этого объекта, обращаемся к элементу DOM дерева с идентификатором «header». Но можно запись упростить и не указывать объект window:

document.getElementById("header");

Это все потому что глобальные объекты являются частью window и система это знает даже если этого не указывать.

 

Свойства объекта window на примере «Размеры окна».

С помощью объекта window, можно узнать размер окна браузера для этого есть два свойства:

window.innerHeight — внутренняя высота окна браузера
window.innerWidth — внутренняя ширина окна браузера

Свойства возвращают размер в пикселях. И размер не включает в себя полосы прокрутки и панели инструментов.
Эти свойства не кроссбраузерные, для браузера Internet Explorer версий 8, 7, 6, 5 используются свойства:

document.documentElement.clientHeight
document.documentElement.clientWidth
или
document.body.clientHeight
document.body.clientWidth

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

 

Некоторые методы объекта window.

window.open() — Открыть новое окно в браузере.
window.close() — Закрыть текущее окно.
window.moveTo() — Переместить текущее окно.
window.resizeTo() — изменить размер текущего окна.

Пример использования методов объекта window:

Посмотреть пример

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

Добавить комментарий