Создай свой сайт!

ГЛАВНАЯ

НОВИЧКАМ

ОСНОВЫ<HTML>

<HTML>КОДЫ

JAVA

WEB СТАТЬИ

ССЫЛКИ

ОБ АВТОРЕ

ГОСТЕВАЯ

Загрузка в два фрейма одновременно

Если вы используете на вашей web-странице два элемента iframe, то, возможно, вам понадобится загрузить в каждый из них новые документы одновременно, одним щелчком по ссылке.
Для этого вам не обойтись без небольшого сценария, написанного на языке JavaScript.

Перед изучением этого урока я советую вам просмотреть первые уроки, посвященные элементу iframe:

Тэг IFRAME
Ссылки на фреймы

Как всегда, для наглядности, я предлагаю вам несколько простых страничек, которые рекомендую скопировать в любой HTML-редактор.

Главная страница:
<html>
<head>
<style type="text/css">
body {background: #C7C5C5; color: #000000;
font-size: 50px; font-weight: bold; text-align: center;}
td {font-size: 40px; text-align: center;}
a:link {color: #0000FF; font-size: 40px;}
a:visited {color: #0000FF; font-size: 40px;}
a:active {color: #FF0000; font-size: 40px;}
a:hover {color: #8000FF; font-size: 40px;}
</style>
</head>
<body>
Главная страница
<table border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<a href="javascript:loadTwo('1.html','2.html')">Ссылка</a>
</td>
<td>
iframe1
<br>
<iframe width="250px" height="400px" name="iframe1"
src="#" frameborder="1" scrolling="no"
marginwidth="10px" marginheight="10px">
Ваш браузер не поддерживает элемент IFRAME
</iframe>
</td>
<td>
iframe2
<br>
<iframe width="250px" height="400px" name="iframe2"
src="#" frameborder="1" scrolling="no"
marginwidth="10px" marginheight="10px">
Ваш браузер не поддерживает элемент IFRAME
</iframe>
</td>
</tr>
</table>

</body>
</html>

Давайте детально разберем HTML-код Главной страницы.

С помощью каскадных таблиц стилей (CSS) задаем цвет фона, размеры и цвет шрифтов, выравнивание текста и параметры для ссылок:

Создаем таблицу из одной строки с тремя ячейками:

В первой ячейке размещаем ссылку (чуть позже мы рассмотрим ее подробнее):

<td>
<a href="javascript:loadTwo('1.html','2.html')">Ссылка</a>
</td>

Во второй - ифрейм с именем "iframe1". Обратите внимание, что для атрибута src я указал значение "#", поэтому в ифрейме отображается пустая страница. Если вы вместо "#" укажете "URL" какого-то документа, то именно этот документ и загрузится в ифрейм при открытии Главной страницы:

<td>
<iframe width="250px" height="400px" name="iframe1"
src="#" frameborder="1" scrolling="no"
marginwidth="10px" marginheight="10px">
Ваш браузер не поддерживает элемент IFRAME
</iframe>
</td>

В третьей ячейке разместился ифрейм с именем "iframe2" (аналогичный первому).

Так же, между тегами <body></body> помещаем небольшой сценарий. Я не буду его детально рассматривать, отмечу только, что функция loadTwo как раз и служит для того, чтобы загружать в ифреймы нужные документы. Вам ничего не надо менять в данном сценарии, кроме выделенных красным цветом имен ифреймов (вы можете дать им свои имена):

Теперь вернемся к нашей ссылке:

<a href="javascript:loadTwo('1.html','2.html')">Ссылка</a>

Данная ссылка вызывает функцию loadTwo, которая загружает документ 1.html в ифрейм с именем iframe1 и документ 2.html в ифрейм с именем iframe2. Вместо 1.html и 2.html вы можете указать URL любых других документов.

Создадим странички 1.html и 2.html:

1.html:
<html>
<head>
<style type="text/css">
body {background: #FFFFFF; color: #000000; font-size: 40px;}
</style>
</head>
<body>
Загрузился документ 1.html
</body>
</html>

2.html:
<html>
<head>
<style type="text/css">
body {background: #FFFFFF; color: #000000; font-size: 40px;}
</style>
</head>
<body>
Загрузился документ 2.html
</body>
</html>

Несколько важных моментов:

Вышеупомянутый сценарий JavaScript будет работать для любого количества ссылок.

Ссылки, которые вызывают функцию loadTwo, могут располагаться как в родительском окне, так и в документе любого из ифреймов.

Если вам нужно загрузить новый документ только в один из ифреймов - воспользуйтесь атрибутом target с указанием имени нужного ифрейма.

Если вы пытаетесь загрузить новый документ в ифрейм, а вместо этого поверх вашей страницы возникает новое окно - вы допустили ошибку! Чаще всего это связано с неправильным указанием имени ифрейма или заданием некорректного значения атрибута target.

Не надо быть "гигантом мысли", чтобы немного переделать наш сценарий JavaScript для одновременной загрузки документов в три и большее количество ифреймов. Попробуйте!

НА ВЕРХ.