Геометрия окна

Большинство броузеров (за исключением Internet Explorer) поддерживают про_ стой набор свойств объекта Window, с помощью которых можно получить сведе_ ния о размерах окна и его положении:

// Полные размеры окна броузера на рабочем столе var windowWidth = window.outerWidth;

var windowHeight = window.outerHeight;

// Положение окна броузера на рабочем столе var windowX = window.screenX

var windowY = window.screenY

// Размеры клиентской области окна, в которой отображается содержимое

// документа. Это размер окна минус высота строки меню,

// панелей инструментов, полос прокрутки и т.п.

var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight;

// Эти значения определяют величину вертикального и горизонтального смещения

// Используются для перехода между координатами документа и координатами окна

// Эти значения указывают, какая часть документа находится в верхнем левом углу экрана var horizontalScroll = window.pageXOffset;

var verticalScroll = window.pageYOffset;

Обратите внимание: эти свойства доступны только для чтения. Методы, которые позволяют перемещать окно, изменять его размеры или прокручивать содержи_ мое, описаны в этой главе далее. Кроме того, следует отметить, что имеется не_ сколько систем координат, о существовании которых знать совершенно необхо_ димо. Экранные координаты определяют положение окна броузера на рабочем столе и измеряются относительно верхнего левого угла рабочего стола. Оконные координаты определяют положение внутри клиентской области окна броузераи измеряются относительно верхнего левого угла клиентской области окна. Ко' ординаты документа определяют положение внутри HTML_документа и изме_ряются относительно верхнего левого угла документа. Если документ по разме_ рам превышает клиентскую область окна (что случается достаточно часто), ко_ ординаты в документе и оконные координаты не совпадают, и при переходе ме_ жду этими системами координат необходимо учитывать величины смещений. Подробнее о системах координат рассказывается в главах 15 и 16.

Как уже упоминалось, свойства объекта Window, о которых только что говорилось, отсутствуют в Internet Explorer. По каким_то причинам свойства, описывающие геометрию окна в IE, определены как свойства тега <body> HTML_документа. Ху_ же того, когда документ с объявлением <!DOCTYPE> отображается в IE 6, эти свой_ ства перемещаются в объект document.documentElement, а не в document.body.

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

Пример 14.2. Переносимый способ определения геометрии окна

/**

* Geometry.js: переносимые функции определения геометрии окна и документа

14.3. Объекты Window, Screen и Navigator

* Этот модуль определяет функции получения геометрических характеристик

* окна и документа

* getWindowX/Y() : возвращают положение окна на экране

* getViewportWidth/Height() : возвращают размеры клиентской области окна

* getDocumentWidth/Height() : возвращают размеры документа

* getHorizontalScroll()	: возвращает	смещение	по	горизонтали
*	getVerticalScroll()	: возвращает	смещение	по	вертикали
*

* Обратите внимание: не существует переносимого способа определить общие

* размеры окна броузера, поэтому отсутствуют функции getWindowWidth/Height()

* ВАЖНО: Этот модуль должен включаться в тег <body> документа, а не в тег <head>

var Geometry = {};

if (window.screenLeft === undefined) { // Для IE и других Geometry.getWindowX = function() { return window.screenLeft; }; Geometry.getWindowY = function() { return window.screenTop; };

}

else if (window.screenX) { // Для Firefox и других Geometry.getWindowX = function() { return window.screenX; }; Geometry.getWindowY = function() { return window.screenY; };

}

if (window.innerWidth) { // Все броузеры, кроме IE Geometry.getViewportWidth = function() { return window.innerWidth; }; Geometry.getViewportHeight = function() { return window.innerHeight; };

Geometry.getHorizontalScroll = function() { return window.pageXOffset; }; Geometry.getVerticalScroll = function() { return window.pageYOffset; };

}

else if (document.documentElement && document.documentElement.clientWidth) { // Эти функции предназначены для IE 6 и документов с объявлением DOCTYPE Geometry.getViewportWidth =

function() { return document.documentElement.clientWidth; }; Geometry.getViewportHeight =

function() { return document.documentElement.clientHeight; }; Geometry.getHorizontalScroll =

function() { return document.documentElement.scrollLeft; }; Geometry.getVerticalScroll =

function() { return document.documentElement.scrollTop; };

}

else if (document.body.clientWidth) {

// Эти функции предназначены для IE4, IE5 и IE6 без объявления DOCTYPE Geometry.getViewportWidth =

function() { return document.body.clientWidth; }; Geometry.getViewportHeight =

function() { return document.body.clientHeight; }; Geometry.getHorizontalScroll =

function() { return document.body.scrollLeft; }; Geometry.getVerticalScroll =

function() { return document.body.scrollTop; };

}

// Следующие функции возвращают размеры документа.

294 Глава 14. Работа с окнами броузера

// Они не имеют отношения к окну, но бывает удобно иметь их.

if (document.documentElement && document.documentElement.scrollWidth) { Geometry.getDocumentWidth =

function() { return document.documentElement.scrollWidth; }; Geometry.getDocumentHeight =

function() { return document.documentElement.scrollHeight; };

}

else if (document.body.scrollWidth) { Geometry.getDocumentWidth =

function() { return document.body.scrollWidth; }; Geometry.getDocumentHeight =

function() { return document.body.scrollHeight; };

}