Введение в JavaScript
[+]
Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 23398 / 4440 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Темы: Интернет-технологии, Программирование
Специальности: Программист, Разработчик интернет-проектов
Теги: alerter, cookie, cookies, href, HTM, html, java, javascript, locate, navigation, onclick, submit, браузеры, графика, мультипликация, отправка данных, парсеры, потоки, серверы, скрипты, фрейм, элементы
Лекция 4:

Программируем свойства окна браузера
A
|
версия для печати
< Лекция 3 || Лекция 4: 1234567 || Лекция 5 >

Передача данных во фрейм

Обычной задачей при разработке типового Web-узла является загрузка результатов исполнения CGI-скрипта во фрейм, отличный от фрейма, в котором вводятся данные для этого скрипта. Если путь загрузки результатов фиксированный, то можно просто использовать атрибут TARGET формы. Сложнее, если результат работы должен быть загружен в разные фреймы (например, в зависимости от выбранной кнопки).

Применим полученные нами знания для решения этой задачи. Сначала заготовим следующие файлы. Основной файл, например, index.htm, содержит левый фрейм, в котором будет находиться форма, и правый фрейм, разбитый на два подфрейма (верхний и нижний). Файл left.htm содержит форму, в которой пользователю предоставляется возможность выбрать верхний или нижний фрейм и нажать кнопку "Загрузить". Файл right.htm содержит простой текст; он будет загружаться в верхний или нижний фрейм, в зависимости от действий пользователя.

Основной файл с тремя фреймами Файл с формой left.htm в левом фрейме Файл right.htm 
<HTML>
<HEAD>
<TITLE>Три фрейма</TITLE>
</HEAD>
  <FRAMESET COLS="50%,*">
    <FRAME NAME=leftframe
            SRC=left.htm>  

    <FRAMESET ROWS="50%,*">
     <FRAME NAME=topframe SRC="">
     <FRAME NAME=botframe SRC="">
    </FRAMESET>

  </FRAMESET>
</HTML>
 
<HTML>
<HEAD>
<SCRIPT SRC="loadframe.js"></SCRIPT>
</HEAD>
<BODY>
 <FORM METHOD=post ACTION=right.htm
  NAME=f onSubmit="return load();">
  <SELECT NAME=s>
       <OPTION>верхний</OPTION>
       <OPTION>нижний</OPTION>
  </SELECT>
 <INPUT TYPE=submit VALUE="Загрузить">
 </FORM>
</BODY>
</HTML>
 
<HTML>
<BODY>

Этот документ  
мы загружаем
при выборе
фрейма
из списка

</BODY>
</HTML>

Для того, чтобы пример заработал, остается в файле loadframe.js описать функцию load(). Функция должна делать так, чтобы в зависимости от выбора пользователем значения селектора "верхний" или "нижний" файл right.htm загружался бы либо в правый верхний, либо в правый нижний фрейм. С этой целью в файле left.htm у формы не был указан целевой фрейм (атрибут TARGET ).

Нашу задачу динамического выбора фрейма можно решать по-разному. Более изящный способ - переназначать "на лету" свойство target, с него мы и начнем (открыть).

function load()
{
if(document.f.s.selectedIndex==0)
  {
   document.f.target = "topframe";
   top.frames[2].document.open();
   top.frames[2].document.close();
  }
else
  {
   document.f.target = "botframe";
   top.frames[1].document.open();
   top.frames[1].document.close();
  }
return true;
}
4.8. Файл loadframe.js: переназначение target на лету

Функция load() всегда возвращает true, а поскольку она вызывается из обработчика события onSubmit, это означает, что всегда будет происходить отправка формы (событие Submit ), т.е. загрузка страницы right.htm, указанной в атрибуте ACTION данной формы. Обратите внимание также на следующие строки в функции load():

top.frames[1].document.open();
   top.frames[1].document.close();

Смысл их таков: когда пользователь выбирает значение верхний или нижний в форме, то файл right.htm загружается в соответствующий фрейм, а оставшийся фрейм открывается на запись (методом ...document.open(), при этом всё его содержимое очищается) и закрывается (методом ...document.close() ), тем самым фрейм остаётся пустым (без текста).

Теперь рассмотрим второй подход - открытие окна с именем, совпадающим с именем фрейма topframe или botframe. Его идея состоит в том, что при попытке открыть окно с именем существующего окна новое окно не открывается, а используется уже открытое. Фрейм - это тоже окно, поэтому на него данное правило распространяется. Функция, реализующая такое поведение, приведена ниже (открыть):

function load()
{
  if(document.f.s.selectedIndex==0)
  {
    window.open("right.htm","topframe");
    top.frames[2].document.open();
    top.frames[2].document.close();
  }
  else
  {
    window.open("right.htm","botframe");
    top.frames[1].document.open();
    top.frames[1].document.close();
  }
return false;
}
4.9. Файл loadframe.js: использование window.open()

В этом подходе функция load() всегда возвращает false. Это необходимо, чтобы отменить отправку данных формы: ведь после того, как мы вызвали window.open(), в отправке данных формы, т.е. загрузке файла right.htm, уже нет надобности.

Дальше >>
< Лекция 3 || Лекция 4: 1234567 || Лекция 5 >

Вопросы и ответы

вопросов: 6
Валерий Банатин
Валерий Банатин

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>

ответить