Фреймы - Дополнение
Как загрузить два (или более) фрейма одним щелчком мыши


Сформируем первый пример с самого начала. Прежде, чем начать, позвольте обратить внимание, что эти инструкции предназначены пользователям Windows95 (или любой операционной системы, которая может иметь дело с длинными именами файлов). Если вы управляете Windows3.x, вы должны использовать расширение файла .htm и соответственно скорректировать сценарий.

Сначала вам будут необходимы несколько целевых документов. Скопируйте следующее и сохраните как hugh_ed.html где-нибудь в новой папке.

<htm>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Ed</FONT>

</BODY>
</HTML>


Сохраните это как hugh_cal.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Calvin</FONT>

</BODY>
</HTML>


Transfer interrupted!

ак ron_mike.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Mike</FONT>

</BODY>
</HTML>


А это сохраните как ron_pete.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Pete</FONT>

</BODY>
</HTML>

Вы должны теперь иметь папку с четырьмя документами в ней...

  1. hugh_ed.html
  2. hugh_cal.html
  3. ron_mike.html
  4. ron_pete.html


Затем вам будет необходима главная страница. Она будет иметь левый фрейм "каталога", а правая сторона будет разделена пополам горизонтально. Сохраните следующее как index.html.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME>
  <FRAMESET ROWS="50%,50%">
    <FRAME>
    <FRAME>
  </FRAMESET>
</FRAMESET>

</HTML>


Затем, мы должны определить то, что будет помещено в каждый фрейм, при загрузке страницы. (Мы пока не сделали direct.html)

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="hugh_ed.html">
    <FRAME SRC="hugh_cal.html">
  </FRAMESET>
</FRAMESET>

</HTML>


И, особенно важно для того, что мы делаем здесь, Вы обязаны дать каждому фрейму ИМЯ. Точнее только тем фреймам, которые изменяются. В нашем примере, фрейм каталога никогда не изменяется, так что мы не должны называть его.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="hugh_ed.html" NAME="Frame_A">
    <FRAME SRC="hugh_cal.html" NAME="Frame_B">
  </FRAMESET>
</FRAMESET>

</HTML>

( (Имейте в виду, что мы пока не создали каталог страницы))

А это для главной страницы.


Следующая вещь, которую мы должны создать - каталог страницы. Начните с этого и сохраните это как direct.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

</BODY>
</HTML>

Теперь, если Вы загрузите index.html, каждый фрейм заполнится.


Все что осталось, так это добавить информацию связей и команды JavaScript в direct.html. Сначала добавьте связи.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

Hugh's friends<P>

Ron's friends<P>

</BODY>
</HTML>


Теперь заключите связи в метки анкера.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>


Есть, где запутаться, вы должны двигаться осторожно и медленно.

Во первых, вставьте набор меток JavaScript в <HEAD> документа. Удостоверитесь, что это находится в метке HEAD и не внутри метки BODY.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>


Теперь вставьте сценарий. Не задумывайтесь пока о том, что это означает. Пока только вставьте его.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>


Затем завершите связи.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

</BODY>
</HTML>

Затем мы будем видеть точно, что случается.


В части связи ...

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

... Вы просто вставляете имена html файлов. В метке head мы помещаем функцию. Это называется функцией, потому что она выполняет действие. В нашем упражнении мы назвали функцию multiLoad(). И мы вызываем multiLoad('hugh_ed.html', 'hugh_cal.html') или multiLoad('ron_mike.html', 'ron_pete.html') в зависимости от того, на какой связи произведен щелчок.

Больше...

В части функции...

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

...... мы определяем функцию.

В нашей функции multiLoad(doc1,doc2), мы посылаем ей hugh_ed.html,hugh_cal.html или ron_mike.html,ron_pete.html в зависимости от того, на какой связи произведен щелчок.

Следующие две строки в коде определяют, что делать с hugh_ed.html, и т.д....

1- Поместить doc1 в Frame_A (doc1 первый параметр, который был передан к функции - hugh_ed.html)
2- Поместить doc2 в Frame_B (doc2 второй параметр, который был передан к функции - hugh_cal.html)

<--ОБРАТНО 

Таблицы, Формы и Итак, Вы хотите построить Web Страницу!