Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 23397 / 4440 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 8:

Программируем "за кадром"

< Лекция 7 || Лекция 8: 123

Управление фокусом

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

В данном разделе мы рассмотрим управление фокусом в

  • окнах;
  • фреймах;
  • полях формы.

Следует сразу заметить, что фреймы - это тоже объекты класса Window, и многие решения, разработанные для окон, справедливы и для фреймов.

Управляем фокусом в окнах

Для управления фокусом у объекта класса "окно" существует два метода: focus() и blur(). Первый передает фокус в окно, в то время как второй фокус из окна убирает. Рассмотрим простой пример:

<SCRIPT>
function open_hidden_window()
{
wid=window.open('','test', 'width=100,height=100');
wid.opener.focus();
wid.document.open();
wid.document.write('<H1>Скрытое</H1>');
wid.document.close();
}
</SCRIPT>
<INPUT TYPE=button value='Скрытое окно'
   onClick='open_hidden_window()'>

В данном примере новое окно открывается и сразу теряет фокус - прячется за окном-родителем. При первом нажатии на кнопку оно еще всплывает и только после этого прячется, но при повторном нажатии пользователь не видит появления нового окна, т.к. оно уже открыто и меняется только его содержимое.

Для того чтобы этого не происходило, нужно после открытия передавать фокус новому окну:

<SCRIPT>
function open_visible_window()
{
wid=window.open('','test', 'width=100,height=100');
wid.focus();
wid.document.open();
wid.document.write('<H1>Видимое</H1>');
wid.document.close();
}
</SCRIPT>
<INPUT TYPE=button value='Видимое окно'
   onClick='open_visible_window()'>

Если теперь совместить эти два примера на одной странице и нажимать попеременно кнопки "Скрытое окно" и "Видимое окно", то окно будет то появляться, то исчезать. При этом новых окон не появляется, так как с одним и тем же именем может быть открыто только одно окно.

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

Для реализации такого сценария достаточно использовать метод окна onblur(). Мы воспользуемся этим методом "в лоб":

window.onblur  = new 
 Function("window.defaultStatus = 'Работаем в фоне...';");
window.onfocus = new 
 Function("window.defaultStatus = 'Готово';");

Этот пример демонстрирует возможность выполнения функции в фоновом режиме. Для проверки этого примера откройте его в браузере, а затем откройте любое другое окно небольшого размера (например, блокнот) и следите за полем статуса в открытом окне браузера. Аналогичного эффекта можно было достичь, поместив указанные команды в контейнере BODY в обработчиках событий onBlur и onFocus.

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

Управление фокусом во фреймах

Фрейм - это такое же окно, как и само окно браузера. Точнее, это объект того же класса. К нему применимы те же методы, что и к обычному объекту "окно".

Пример 8.1 (кликните, чтобы открыть). Рассмотрим страницу из двух одинаковых фреймов:

<HTML>
<FRAMESET COLS='50%,*'>
<FRAME SRC=clock.htm>
<FRAME SRC=clock.htm>
</FRAMESET>
</HTML>
8.3. Часы в двух фреймах (работают там, где фокус)

В файл clock.htm поместим следующую страницу, которая тем самым будет отображаться в обоих фреймах:

<HTML><HEAD><SCRIPT>
var flag=false;
function clock()
{ if(flag)
  {
   var d = new Date();
   document.f.e.value =
   d.getHours()   + ':' +
   d.getMinutes() + ':' +
   d.getSeconds();
  }
setTimeout('clock();',100);
}
</SCRIPT></HEAD>

<BODY onLoad='clock()'
onFocus='this.flag=true'
onBlur='this.flag=false'>

<FORM NAME=f>
<INPUT NAME=e>
</FORM></BODY></HTML>
8.4. Часы запускаются, если данное окно в фокусе

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

Фокус в полях формы

Обработчики событий onFocus и onBlur определены для любого поля формы (текстовое однострочное поле, текстовая область, кнопка, радиокнопки, ниспадающие списки). В качестве одного из возможных применений этих обработчиков рассмотрим защиту поля от ввода (изменения) содержимого:

<INPUT TYPE=text onFocus='this.blur();' VALUE='Попробуйте изменить'>

Когда пользователь попытается установить курсор в таком поле ввода, тем самым передав ему фокус, наш обработчик события уведет из него фокус и тем самым изменение поля становится невозможно.

Примечание. Этот пример приведен лишь в качестве демонстрации обработчиков событий. В настоящее время для защиты поля от изменения достаточно указать у него атрибут READONLY:

<INPUT TYPE=text READONLY VALUE='Попробуйте изменить'>
< Лекция 7 || Лекция 8: 123
Валерий Банатин
Валерий Банатин

function f() { var i=5; k=7; } f(); alert(k);

В примере выдается результат k=7, однако, хоть переменная и не объявлена, она внутри функции, т.е. локальная и не должна быть видима, или вторая и последующие все-таки становятся глобальными?

Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>