Объектная модель браузера, объекты браузера

Содержание

1 Объект браузера — window
2 Объект браузера — navigator
3 Объект браузера — history
4 Объект браузера — location
5 Объект браузера — screen
6 Объект браузера — document
7 Объект браузера — event
8 Другие свойства объекта window
9 Методы объекта window

Объектная модель браузера (ОМБ) — множество объектов, которые создает браузер при загрузке страницы. В рамках ОМБ существует еще объектная модель документа (Document Object Model — DOM), она отвечает за сам html документ.

В ОМБ есть несколько объектов. Рассмотрим каждый из них.

Объект браузера — window

Это самый главный объект в объектной модели браузера. Этот объект отвечает за окно браузера. И вся работа с браузером начинается с его окна. Соответственно, если нет окна — нет ничего, т.к. документ, элементы управления (адресная строка, кнопки вперед-назад) загружаются в это окно.

Если в браузере открыта одна вкладка, то создан один объект window, если 2 — 2 объекта, и т.д. Каждый раз, открывая новую вкладку, браузер создает новый объект window.

Чтобы получить объект window, достаточно написать в html документе:

<script type="text/javascript">
   window //объект window
</script>

А все остальные объекты браузера существуют как свойства объекта window.

Объект браузера — navigator

Это чисто информационный объект, он дает информацию о самом браузере (название, версия, установленные компоненты). Получить объект navigator можно как одноименное свойство window:

<script type="text/javascript">
   window.navigator
</script>

Объект браузера — history

Данный объект отвечает за 2 кнопки в окне браузера: ‘вперед’ и ‘назад’. Получается как одноименное свойство объекта window:

<script type="text/javascript">
   window.history
</script>

Объект браузера — location

Этот объект отвечает за адресную строку в окне браузера. Он позволяет получить адрес страницы, на которой находитесь, и изменить этот адрес. Как только поменяли адресную строку, браузер автоматически осуществляет переход по этому адресу. Получается как свойство объекта window:

<script type="text/javascript">
   window.location
</script>

Объект браузера — screen

Это информационный объект. Хотя он и является свойством объекта window, но никакого отношения к окну браузера не имеет. Он дает информацию обо всем экране пользователя (разрешение экрана). Получают его так:

<script type="text/javascript">
   window.screen
</script>

Объект браузера — document

Самый сложный объект браузера, который в свою очередь дает начало объектной модели документа (DOM). Данный объект отвечает за html документ, загруженный в окно браузера. Его получают аналогично:

<script type="text/javascript">
   window.document
</script>

Объект браузера — event

Объект отвечает за наборы параметров, связанных с событием. Этот объект является свойством объекта window только в IE (internet explore), причем это нестандартное свойство. В других браузерах объект event получают другим способом.

Сейчас для получения вышеперечисленных объектов в коде необязательно обращаться к объекту window (это сделано для удобства разработчиков), достаточно писать так:

<script type="text/javascript">
   window.navigator; //раньше писали так
   navigator; //теперь так
   event;
   screen;
   history;
</script>

Другие свойства объекта window

frames — представляет из себя массив, содержащий объекты window, каждый из которых отвечает за вложенный в это окно фрейм. Как при работе с фреймами, здесь есть общее окно window, которое обладает некоторыми свойствами (например, перемещать окна-фреймы, менять их размеры и ориентацию, закрывать окно). Рассмотрим свойства объекта window внутри frames:
Свойства, отвечающие за ссылки на другие объекты window: top, parent, opener, self.

Top — получаем ссылку на главное окно браузера.
Parent — это ссылка на родителя этого фрейма.
Self — ‘зацикленная ссылка’ (window.self == window), не имеет никакого смысла.
Opener — указывает на объект window, на то окно, которое открыло данное (например, у вас было одно окно, вы открыли другое. Тогда opener будет указывать на объект window предыдущего окна).

Свойства, отвечающие за состояние самого окна.

1. Closed — свойство типа boolean (true, false). Показывает закрыто окно или нет. Помните, что при закрытии окна объект window не уничтожается, поэтому и допустимо значение true (т.е. окно закрыто, но объект window продолжает существовать).
2. DefaultStatus, Status — отвечают за статусную строку браузера. Можно получить, что там написано, или написать что-то. Сейчас не советую менять статусную строку. Пример (выведет дату и время в статусной строке):

function DefaultStatus(){
   var d=new Date(); //создали объект
   windows.defaultStatus=d.toLocaleString(); //преобразуем в строку
   defaultStatus=d.toLocaleString();} //можно так без window

Name — внутреннее имя окна. Предназначено только для разработчиков, пользователь его не видит.
ReturnValue — предназначено для обмена информацией между окнами. Например, одно окно открывает другое, в другом окне пользователь что-то делает, нажимает кнопку; и нужно передать информацию из одного окна в другое. Окна могут взаимодействовать между собой через объекты window.

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

Методы ввода-вывода информации

1. alert () — выводит окно. В браузере Mozilla alert появляется в центре окна, а в IE — в центре экрана, вне зависимости где находится окно.

function Alert(){
   alert("hello");}

1. confirm () — выводит окно с вопросом: ‘да’ или ‘нет’ (‘ok’ и ‘chancel’). Возвращает соответственно true или false.

var a=confirm("This is a cat?");
alert(a);

1. prompt () — выводит информацию на страницу.

var a=prompt("подсказка", "default");
alert(a);

Открытие — закрытие — печать окон.

1. open () — можно из одного окна открыть другое окно. Его параметры: адрес страницы, которую надо открыть; внутренне имя окна, которое хотите ему присвоить; набор свойств открываемого окна (location, width, height, menubar, toolbar, scrollbars).

open("http://phpmove.ru"); //можно с одним параметром
open("http://phpmove.ru","site","width=150"); //можно с 3 параметрами

1. close () — закрывает окно. Без параметров. При закрытии выскакивает предупреждение браузера из соображений безопасности.

close();

print () — имитирует нажатие кнопки ‘печать’. Выскакивает окно выбора принтера и предложение распечатать текущий документ. Без параметров.
focus () — передать фокус окну, т.е. выводит окно на передний план. Без параметров.
blur () — убрать фокус у окна, уводит окна браузера на задний план, под все открытые окна. Без параметров.

Методы для управления открытым окном — положение и размеры окна.

1. moveTo (), moveBy () — двигает окно на экране в заданные координаты (указываются координаты левого верхнего угла); смещение относительно левого верхнего угла.

moveTo(10,20);
mobeBy(10,20); //смещение относительно текущего левого верхнего угла

1. resizeTo (), resizeBy () — задает размер окна; увеличивает размер окна на указанное число пикселей по горизонтали и вертикали.

resizeTo(500,500); //задает размер окна
resizeBy(10,20); //увеличивает размер окна

1. scrollTo (), scrollBy () — прокручивает содержимое окна. 1-й параметр — прокрутка слева направо, 2 — сверху-вниз. scrollBy — прокручивает на указанное число пикселей относительно текущего положения. Данные методы используются редко, т.к. здесь для прокрутки используются пиксели, а сама страница может масштабироваться по процентам, и тогда получится некрасиво.

scrollTo(10,20); //просто прокрутка
scrollBy(11,12); //относительно текущего положения

Метки: JavaScript, window, объектная модель браузера