4.2.2. Відображення декількох документів html

У документі, що подає компакт-диск Фроловых, інформація відображається в трьох фреймах. Верхній фрейм використовується для заголовка, лівий - виконує роль змісту, і, нарешті, правий служить для показу вмісту. Натисканням кнопок, розташованих у лівому фрейме, можна переглядати в правій частині вікна різноманітні документи HTML.

У першому випуску компакт-диска не використовувалися сценарії JavaScript. Зараз покажемо, як можна за допомогою нескладного сценарію удосконалити інтерфейс користувача.

Будемо використовувати фрейм заголовка, розташований у верхній частині вікна, для розміщення анотації на матеріал, поданий у правому фрейме.

При цьому, якщо натиснути кнопку з написом "Ласкаво просимо", у заголовку з'явиться наш логотип, показаний на мал. 4.2. Якщо ж натиснути кнопки "Книги" або "Статті", заголовок будет виглядати так, як це показано відповідно на мал. 4.3 і 4.4.

B листинге 4.5 показаний вихідний текст файла опису фреймов.

Листинг 4.5. Файл chapter4/ourCD/index. html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<ТIТLЕ>Авторський диск Олександра Фролова і Григорія Фро-лова</TITLE>

</HEAD>

<FRAMESET ROWS="85,*" FRAMEBORDER=1> <FRAME SCROLLING="no" NAME="title" SRC="title html" MARGINHEIGHT="1">

<FRAMESET COLS="180,*" FRAMEBORDER=1>

<FRAME SCROLLTNG="auto" NAME="toc" SRC="toc.html">

<FRAME SCROLLING="auto" NAME="mainpage"

SRC="main.htrnl">

</FRAMESET>

<NOFRAME>

<BODY BGCOLOR="#FFFFFF">

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Так само як і в попередньому прикладі, тут описані три фрейма. Документ заголовка, що відображається відразу після завантаження фрейма, а також після того, як користувач натисне кнопку "Ласкаво просимо", показаний у листинге 4.6.

Листинг 4.6. Файл chapter4/ourCD/title. html

<HTML>

<HEAD>

<ПОЗНАЧКА HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1251">

</HEAD>

<BODY BACKGROUND="pic/FFON.GIF" BGCOLOR="#ffffff">

<P>

<TABLE>

<TR>

<TD VALIGN=TOP>

<A HREF="emailus.htm" TARGET="mainpage">

<IMG SRC="pic/frlogo3.gif" АLТ="Олександр Фролов і Григорій Фролов, технічні письменники з Москви" BORDER=0></A></TD>

<TD VALIGN=TOP>

<A HREF="emailus.htm" TARGET="mainpage">

<IMG SRC="pic/frlogo.gif" АLТ="Олександр Фролов і Григорій Фролов, технічні письменники з Москви" BORDER=0></A></TD>

</TR>

</TABLE>

<Р>

</BODY>

</HTML>

Файл main. html поданий у листинге 4.7 (у скороченому виді. Він не має ніяких цікавих особливостей.

Листинг 4.7. Файл chapter4/ourCD/main. html

<HTML>

<HEAD>

<ПОЗНАЧКА HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1251">

<TITLE>Untitled</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<Н2>Ласкаво просимо!</H2>

<P>

<IMG SRC-"pic/cd.gif" ALIGN=LEFT HSPACE=5>

<P>

Ви набули першого випуску авторського компакт-диска технічних письменників Олександра Фролова і Григорія Фролова.

…

< Р>

<CENTER><A HREF="copyrihgt. htm"><i><FONT SIZE=2>© Олександр Фролов, Григорій Фролов, 1997 </FONT></I></A></CENTER>

</BODY>

</HTML>

Набагато важніше для нас файл toc. html. У цьому файлі знаходяться функції сценарію JavaScript і посилання на інші документи HTML. Цей файл із несуттєвими скороченнями показаний у листинге 4.8.

Листинг 4.8. Файл chapter4/ourCD/toc. html

<HTML>

<BODY BGCOLOR="#BOFFD8">

<SCRIPT LANGUAGE="JavaScript">

<!--

function loadPage(szNewURL,szTitle)

{

parent.mainpage.window.location.href=szNewURL;

parent. title. window. location. href=szTitle;

}

^//-->

</SCRIPT>

<FONT FACE="Arial, Helvetica" SIZE=1>

<P>

<A HREF="Javascript:loadPage('main.html', 'title.html');"><IMG SRC="pic/fcd_62.gif" BORDER=0 АLT="Ласкаво просимо"></А>

<BR>

<A HREF="javascript:loadPage('books/home.html', 'books/title.html');"><IMG SRC="pic/fcd_82.gif" BORDER=0 ALT="Книги"></А>

<BR>

<A HREF="javascript:loadPage('articles/articles.html', 'Articles/title, html');"><IMG SRC="pic/fcd_102 .gif" BORDER=0 АLТ="Статті"></А>

<BR>

...

<P>

</BODY>

</HTML>

Функція loadPage завантажує у фреймы mainpage і title документи HTML, адреси URL який передаються їй через параметри. Для завантаження установлюється властивість location. href для вікна відповідного фрейма:

parent. mainpage. window. location. href=szNewURL;

parent. title. window. location. href=szTitle;

Для виклику функції loadPage використовується така конструкція:

<A HREF="javascript:loadPage('main. html', 'title. html');"><IMG SRC="pic/fcd_62. gif" BORDER=0 ALT="Ласкаво просимо"></A>

Тут у параметрі HREF оператора посилання <А> після ключового слова javascript розташований рядок виклику функції. Звернете увагу на використання одинарних і подвійних лапок. Тому що в сценаріях JavaScript вкладення однакових лапок неприпустимо, для рядків, переданих функції в якості параметрів, застосовані одинарні лапки Значення параметра HREF виділено при цьому подвійними лапками.