Объект Window в JavaScript

Для создания всплывающих окон в JavaScript используется объект Window. У этого объекта существует ещё одна классная функция, о которой мы поговорим ближе к концу статьи. А пока о том, как использовать объект Window в JavaScript по своему прямому назначению.

Конструктора у объекта Window, в том плане, что он закрыт, поэтому окна создаются через метод объекта Window - open():

var win = window.open("http://myrusakov.ru", "My Window");

В данном примере мы создаём окно, в которое будет подгружен сайт: " http://myrusakov.ru ", а имя нового окна будет: " My Window ". Это простейший вариант создания окна в JavaScript. Однако, у метода open() существует ещё один необязательный параметр, с настройками нового окна:

var win = window.open("http://myrusakov.ru", "My Window","width=400,height=500,menubar=yes,toolbar=no,location=yes,scrollbars=yes");

Обратите внимание на то, что этот параметр имеет очень жёсткие условия в плане синтаксиса: никаких пробелов быть вообще не должно. А именно эту ошибку чаще всего и допускают. Теперь о параметрах:

• Width - отвечает за ширину нового окна.
• Height - отвечает за высоту нового окна.
• Menubar - если стоит " yes ", то в новом окне будет меню, если стоит " no ", то, соответственно, меню не будет.
• Toolbar - отвечает за наличие панели инструментов.
• Location - отвечает за наличие адресной строки в новом окне.
• Scrollbars - отвечает за наличие полос прокрутки.

Теперь переходим к методам, позволяющим управлять объектом Window в JavaScript. Сразу хочется заметить, что глобальное окно (в котором и выполняется наш скрипт) также является экземпляром объекта Window, и именно к нему и будут применены некоторые методы.

А начнём мы с простейших методов - focus() и blur(). Эти методы позволяют навести фокус на окно (focus()) и, наоборот, потерять его (blur()). Если вдруг, кто не знает, то фокус - это когда окно становится активным. Когда окно перестаёт быть активным (переключились на другое окно), то говорят, что окно теряет фокус. В следующем примере демонстрируется использование этих двух методов:

win.focus();
//Некая задержка
win.blur();

Здесь мы даём фокус нашему окну, потом ставим некую задержку (пока не буду приводить код задержки, чуть попозже, потерпите, пожалуйста), а потом снимаем фокус.

Метод close() позволяет закрыть окно:

win.close();

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

Есть ещё и другие методы в объекта Window, которые тоже могут использоваться - это методы back() и forward(). Эти методы заменяют кнопки " Назад " и " Вперёд " в браузере. Иногда это используют, чтобы сайт был более удобен для пользователя (например, сделать кнопки на сайте для возврата на предыдущую страницу). Применение этих методов очевидное и очень простое:

window.back();

И при заходе на эту страницу пользователь автоматически вернётся назад (при условии, что есть куда возвращаться, конечно). Аналогичный метод и forward(). Но сейчас я хочу, чтобы Вы обратили внимание на то, что мы применили в этот раз метод к глобальному окну, а разработчики нам позволили этот глобальный объект не писать, то есть, например, так:

back();

Очевидно, что если бы применяли метод к объекту Window, который мы создали через open(), то пришлось бы писать его имя, как мы делали раньше.

Теперь перейдём к методам, которые используют очень часто, - таймерам в JavaScript. Есть всего два метода для работы с таймерами. Первый метод - это setTimeout(). Эта функция принимает два параметра: функцию (либо код), которую нужно выполнить, и второй параметр - задержку (в миллисекундах), через которую надо выполнить функцию (либо код). Вот пример:

setTimeout(func, 3000);
function func () {
alert("Прошло 3 секунды");
}

Если Вы запустите данный скрипт, то через 3 секунды после начала выполнения Вы увидите информационное сообщение. Обратите внимание, что метод setTimeout() применён к глобальному окну, поэтому мы не писали так: " window.setTimeout() ". Хотя, конечно, так тоже можно писать, просто разработчики JavaScript предоставили нам сокращённую запись.

Если требуется остановить таймер, то используется метод clearTimeout(), который принимает в качестве параметра идентификатор, полученный при использовании метод setTimeout():

var id = setTimeout("3 + 4", 5000);
clearTimeout(id);

То есть сразу после запуска таймера, мы его останавливаем, соответственно, выражение: " 3 + 4 " посчитано не будет.

Ключевая особенность метода setTimeout() в том, что он выполняется всего один раз. В нашем примере, он вызвал функцию func() и всё. Больше эта функция вызываться через таймер не будет. А вот для того, чтобы настроить регулярное срабатывание таймера через равные промежутки времени используется метод setInterval():

var counter = 0;
var id = setInterval(func, 5000, "Tommy");
function func(name) {
counter++;
alert(name + ", уже прошло " + (counter * 5) + " секунд!");
if (counter == 4) clearInterval(id);
}

В данном случае, мы создали глобальную переменную counter, которая показывает, сколько раз была вызвана функция. От неё считается и прошедшее время после начала выполнения скрипта. Также заметьте, что функция func() требует параметр. Этот параметр передаётся в методе setInterval() сразу после параметра с задержкой. Если будет два параметра в функции, то в методе setInterval() также надо будет дописать ещё два передающихся параметра. Такие же правила и для метода setTimeout().

В скрипте после 4-х вызовов функции мы останавливаем непрерывное выполнение таймера.

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

Дата добавления: 2015-10-31