Фреймы - Дополнение
Как загрузить два (или более) фрейма одним щелчком
мыши
Сформируем первый пример с самого начала. Прежде, чем начать, позвольте обратить внимание, что эти инструкции предназначены пользователям 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>
<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>
Вы должны теперь иметь папку с четырьмя документами в ней...
Затем вам будет необходима главная страница. Она будет иметь левый фрейм "каталога", а правая сторона будет разделена пополам горизонтально. Сохраните следующее как 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)