Раздел: Сайтостроение / JavaScript /

Работа с окнами в JavaScript

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

Современный JavaScript - это довольно мощный язык с большими возможностями. И одна из таких возможностей - работа с окнами.

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

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Для получения данных об окне, рабочем столе или браузере, в котором выполняется сценарий, можно использовать возможности объектов Window, Screen и Navigator. Эти возможности, например, позволяют узнать размер окна, размер рабочего стола, версию браузера и т.п.

Объект Window

Пример:

//Размеры окна браузера 
var winW = window.outerWidth;
var winH = window.outerHeight;

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

document.write("Ширина окна = " + winW + "<br>");
document.write("Высота окна = " + winH + "<br>");
document.write("Положение окна Х = " + winX + "<br>");
document.write("Положение окна Y = " + winY + "<br>");

ВНИМАНИЕ!
Это не будет работать в браузере Internet Explorer. И эти свойства доступны только для чтения.

Также обратите внимание на то, что существует несколько систем координат.

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

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

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

Объект Screen

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

Свойства width и height определяют размер экрана в пикселах.

Свойства availWidth и availHeight определяют размер экрана, который действительно доступен для работы. Из общих размеров при этом исключается пространство, необходимое для таких графических элементов, как панель задач.

Пример:

//Размеры экрана 
var screenW = screen.width;
var screenH = screen.height;

//Размеры экрана доступные для работы 
var screenAW = screen.availWidth;
var screenAH = screen.availHeight;

document.write("Ширина экрана = " + screenW + "<br>");
document.write("Высота экрана = " + screenH + "<br>");
document.write("Ширина экрана доступная = " + screenAW + "<br>");
document.write("Высота экрана доступная = " + screenAH + "<br>");

Свойство navigator объекта Window ссылается на объект Navigator. Этот объект содержит некоторые данные о браузере. Например, название браузера, номер версии, операционная система, в которой работает браузер и т.п.

И хотя прямого отношения к окнам этот объект не имеет, я решил о нём немного рассказать именно в этом разделе, потому как браузер работает в окне )))

У объекта Navigator есть несколько свойств, которые можно использовать для получения сведений о браузере:

appName - название браузера.

appVersion - номер версии и/или другие данные о версии браузера.

userAgent - строка, которую браузер посылает в HTTP-заголовке USER-AGENT.

appCodeName - кодовое имя браузера.

platform - аппаратная платформа, на которой работает браузер.

Пример:

document.write("Браузер: " + navigator.appName + "<br>");
document.write("Аппаратная платформа: " + 
                navigator.platform + "<br>");

ПРИМЕЧАНИЕ
Для браузеров, которые созданы на основе Netscape, первая строка выведет слово “Netscape”. А это очень многие современные браузеры, такие как Гугл-Хром, Мозилла и т.п. Поэтому с помощью свойства appName не всегда можно точно узнать имя браузера.

На этом с описанием объекта Navigator я заканчиваю, хотя здесь есть ещё о чём поговорить. Для примера приведу ещё один код (попробуйте понять его сами), который перебирает и выводит все свойства объекта Navigator.

var browser = "СВЕДЕНИЯ О БРАУЗЕРЕ:<br>";
for(var propname in navigator) 
{
  browser += propname + ": " + navigator[propname] + "<br>"
}

document.write(browser);

ПРИМЕЧАНИЕ
Возможно, вас это удивит, но если вы выполните этот код в разных браузерах, то вы получите не только разные значения свойств, но и разные наборы свойств. То есть те свойства, которые перечислены выше, есть почти у всех браузеров. Однако могут быть и другие - в зависимости от браузера и его версии.

Как открыть новое окно в JavaScript

Ещё немного расскажу о том, как открываются новые окна в JavaScript, и на этом пока закончим, потому что вопрос этот весьма обширный и в одну статью впихивать всё не стоит.

Открывать новые окна браузера можно методом open() объекта Window.

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

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

Первый аргумент - это URL-адрес документа, который будет загружен в новое окно. Если этот параметр отсутствует, равен null или пустой строке, то окно будет пустым.

Второй параметр - это имя окна.

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

Указывать четвертый параметр имеет смысл только тогда, когда второй параметр является именем существующего окна. Четвёртый параметр - это логическое значение. Оно определяет, должен ли URL-адрес, указанный в первом параметре заменить текущую запись в истории просмотра окна или требуется создать новую запись. Если равен true, то текущая запись будет заменена. Если false - будет создана новая (по умолчанию).

Пример:

var w = window.open("test-23-04.htm", "newwin",
                    "width=300, height=200");

Здесь мы создаём новое окно с именем newwin. В окно загружаем содержимое файла test-23-04.htm. Ширина окна 300 пикселей, высота - 200.

Выглядеть это будет примерно так:

Открытие нового окна JavaScript

Эта статья - лишь самые начальные сведения о работе с окнами в JavaScript. Если хотите узнать больше, то сделать это можно здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>


Программирование на JavaScript с Нуля до Гуру 2.0 Программирование на JavaScript

Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика