Объект 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.
-
- Михаил Русаков
Комментарии (21):
Можно ли открыть окно win = window.open, а через N секунд используя setTimeout закрыть его?
Ответить
Чем ждать ответа, проще самому взять и проверить, причём этот вариант будет в 100 раз полезнее.
Ответить
Проверил и до, и после. Открыл многое другое, например, что setTimeout(func(),1000) не работает из-за скобок функции (принял как данность). Но как закрыть открытое окно не понял ни из видео-урока, ни из учебника. Оставил в надежде, что разберусь в дальнейшем. Вопрос поднял, чтобы указать какое место мне непонятно.
Ответить
window.back() не работает в IE 9. Михаил, скажите, пожалуйста, почему? Вот код: <a href="#" onClick="window.back();"><b>Назад</b></a>
Ответить
history.back()
Ответить
Спасибо большое :).
Ответить
Задание по объекту Window. Скажите что не так? Почему переменные не становятся параметрами? Заранее благодарен. <script language = "javascript"> var x = prompt ("Введите адрес сайта"); var y = prompt ("Введите ширину страницы в пикселяч"); var z = prompt ("Введите длину страницы в пикселях"); var mywndow = window.open ("x", "fff", "innerWidth=y,innerHeight=z"); </script>
Ответить
Потому что их нельзя писать как в PHP внутри строк, нужно через + их соединять со строками.
Ответить
спасибо большое!
Ответить
Здравствуйте. Можно пример. Не как не получается. Спасибо.
Ответить
Все, получилось. window.open(site, "fdfdfsdf", "innerWidth="+x+", innerHeight="+y+"");
Ответить
Михаил! подскажите, а можно ли при запуске сайта принудительно развернуть окно браузера на весь экран? Метод window.open('url','nameWindow','fullscreen-yes') открывает новое окно (в моём случае вообще бесконечное количество раз) не пойму в чём дело. пример кода: <head> <script language="javascript"> window.open('http://localChk.local/', "", "fullscreen=yes, scrollbars=auto, left=0, top=0"); </script> </head>
Ответить
window.open не позволяет сразу при загрузке открывать окна, браузер это блокирует.
Ответить
Посоветуй тогда способ, как при запуске сайта принудительно развернуть окно браузера на весь экран?
Ответить
Никак.
Ответить
ну а например для IE top.window.moveTo(0,0); top.window.resizeTo(screen.availWidth,screen.availHeight); чем плохо?
Ответить
А в других браузерах это работает?
Ответить
К сожалению нет, НО хоть что то.
Ответить
Вот поэтому и плохой. А универсальных вариантов, чтобы против желания пользователя менялся размер окна, такого нет. Тем более, мне бы совсем не понравилось, если бы без моего разрешения просто взяли и изменили размер окна. Поэтому есть подозрение, что и в IE это скоро отменят.
Ответить
Всё понятно. Спасибо.
Ответить
Добрый вечер! Вы пишите, что setTimeout() как она есть работает для главного окна. Хочу открыть новое окно и через 3 сек. закрыть(открывается как вкладка с данным кодом, но с окном тоже пробовал, покороче просто) var win = window.open("http://yandex.ru"); setTimeout(func, 3000); function func(){ win.close(); }- вот так работает. var win = window.open("http://yandex.ru"); win.setTimeout(func, 3000); function func(){ win.close(); }- открывает и не закрывает. Не могу понять логику, какая разница где запускать этот таймер? Логичнее кажется запустить как раз в том окне. И еще никак не могу вывести что-либо с помощью alert() в открытом окне, как ни пробовал, подскажите тоже, если не сложно. п.с. у Вас время +1 от Москвы.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.