Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / 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
Свойство 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, jQuery и Ajax с нуля до гуру >>>