Добавляем...


Применение фреймов
Теперь, когда вы знаете правила назначения имен фреймам, настало время сделать что-нибудь с ними. В этом разделе мы представляем решения общих проблем фреймов и даем советы по поводу других вопросов их использования.



Загрузка фреймов | "Выталкивание" фреймов | Создание фреймов | Управление состоянием с помощью фреймов Типичной проблемой, возникающей перед разработчиком, использующим HTML, загрузка множества фреймов с помощью одной ссылки. (X)HTML предлагает атрибут target, с помощью которого можно указать один фрейм, например framename: <a href="http://www.google.com" target="framename">Google</a>

Однако как быть, если одним щелчком на ссылке должны вызываться два или больше фреймов? Для этого используется JavaScript. Рассмотрим следующий блок frameset:

<frameset cols="300,* ">
<frame src="navigation.html" name="framel" id="framel" />
<frame src="content.html" name="frame2" id="frame2" />
<frame src="morecontent.html" name="frame3" id="frame3" /> </frameset>

В данном случае мы хотим, чтобы ссылка в файле navigation. html загружала два окна сразу. Можно было бы написать простой набор операторов JavaScript, выполняющих это:

<a href="javascript: parent.frames['frame2'].location='http://www.google. com'; parent.frames['frame3'].location='http://www.javascriptref.com'; ">Два узла</a>

Такой подход кажется несколько громоздким, поэтому лучше создать функцию с именем loadFrames(), которая сделает нужную работу. Можно даже рассмотреть возможность использования общей функции, которая берет два массива (один с фреймами, а другой — с целевыми адресами URL) и загружает их по очереди, как показано ниже:

<script type="text/javascript">

function loadFrames(theFrames, theURLs)
{
alert( theFrames[0]);
if ((loadFrames.arguments.length != 2) || (theFrames.length != theURLs.length ))
return
for (var i=0; i<theFrames.length; i++)
theFrames[i].location = theURLs[i]; }
</script>
<a href="javascript:loadFrames( [parent.frames['frame2'], parent.frames['frame3'], parent.frames['frame4']], ['http://www.google.com', 'http://www.javascriptref.com', 'http://www.ucsd.edu']);">Три узла</a>

Хотя фреймы очень полезны, особенно для управления состоянием в JavaScript, они могут создавать серьезные проблемы для Web-разработчиков. Например, некоторые узлы размещают фреймы для всех внешних ссылок, что лишает пользователя возможности доступа ко многим полезным элементам экрана. Часто разработчики узла используют технику, называемую "выталкиванием" фреймов (frame boosting), для разрушения окружения типа frameset, в котором может находиться страница. Очень легко использовать следующий сценарий; в нем текущий адрес для фрейма верхнего уровня устанавливается равным значению страницы, которая не должна заключаться во фрейм.

<script type="text/javascript">
function frameBuster()
{
if (window != top)
top.location.href=location.href;
}
window.onload =frameBuster;
</script>

Противоположной проблемой является необходимость запрета отображения создаваемых окон-фреймов вне пределов контекста их создания. Это случается, например, когда пользователь сохраняет в виде закладки часть блока frameset или запускает ссылку из frameset в новом окне. Основной идеей здесь является проверка того, что все ли созданные документы находятся внутри фреймов, и это делается путем проверки адреса назначения каждого окна; в случае несоответствия должен динамически восстанавливаться блок frameset документа. Например, имея простое окружение с двумя фреймами наподобие файла frameset.html

<frameset cols="250,*">
<frame src="navigation.html" name="navigation" id="navigation" />
<frame src="content.html" name="content" id="content" />
</frameset>

можно предположить, что пользователь через закладку или непосредственно откроет navigation.html либо content.html. Чтобы восстановить блок frameset в navigation.html и content.html, можно использовать фрагмент

<script type="text/javascript">
if (parent.location.href == self.location.href)
window.location.href = 'frameset.html';
</script>

который обнаружит, что страница была за пределами frameset, и восстановит ее. Конечно, это весьма упрощенный пример, но он раскрывает основную идею построения фреймов. Сценарий можно расширять, добавляя в него разнообразные уловки для сохранения правильной навигации и целостности содержимого страницы.
Все, описанное в последних разделах, показывает, что фреймы действительно имеют недостатки. Хотя они могут обеспечить привлекательный интерфейс, они не слишком хороши для использования в качестве закладок, часто создают проблемы для печати и не очень хорошо обрабатываются поисковыми системами. Как было продемонстрировано, можно, конечно, использовать JavaScript для решения проблем фреймов, но во многих случаях лучше не использовать их вообще. Перед тем как завершить обсуждение фреймов, давайте рассмотрим еще одну интересную возможность использования фреймов в JavaScript. Одной из полезных возможностей фреймов является их способность сохранять переменное состояние в ходе многочисленных просмотров страницы. Как вы уже видели, можно получить доступ к пространству переменных одного окна из другого, но то же самое справедливо и для фреймов. Применяя специальный тип блока frameset, использующий малые фреймы, практически незаметные для пользователя, можно создать пространство переменных, доступных для различных загружаемых частей содержимого страницы. Рассмотрим, например, блок frameset в представленном ниже файле stateframes.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frameset хранит состояние</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<frameset rows="99%,*" >
<frame src="mainframe.html" name="frame1" id="frame1" frameborder="1" />
<frame src="stateframe.html" name="stateframe" id="stateframe" frameborder="0" scrolling="no" noresize="noresize" />
</frameset>
</html>

В данном случае мы имеем очень малый фрейм stateframe, который будет использоваться для сохранения переменных при переходах от страницы к странице. Содержимое файлов mainframe.html, mainf rame2.html и stateframe.html показано ниже. Обратите внимание на то, как с помощью ссылки на родительский фрейм мы получаем возможность доступа к переменной username скрытого фрейма на любой странице.




Файл stateframe.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Variables</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body>
<script type="text/javascript">
var username = "";
</script>
</body>
</html>

Файл mainframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Хранитель состояния 1</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body onload="document.testform.username.value = parent.stateframe.username">
<h1 align="center">Сохранить значения JS</h1>
<form name="testform" id="testform" action="#" method="get">
<input type="text" name="username" id="username" value="" size="30" maxlength="60" />
<input type="button" value="Сохранить значения" onclick="parent.stateframe.username = document.testform.username.value;" />
</form>
<div align="center">
<a href="mainframe2.html">Следующая страница </a>
</div>
</body>
</html>

Файл mainframe2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Хранитель состояния 2</title>
<meta http-equiv="content-type" content="text/html;" />
</head>
<body>
<script type="text/javascript">
<!--
if (!(parent.stateframe.username) || (parent.stateframe.username == ""))
document.write("<h1 align='center'>Извините, мы с вами не встречались</h1>");
else
document.write("<h1 align='center'>Добро пожаловать на страницу"+parent.stateframe.username+"!</h1>");
// -->
</script>
<div align="center">
<a href="mainframe.html">Назад к предыдущей странице</a>
</div>
</body>
</html>

Хотя программный код JavaScript может использоваться для сохранения состояния и с его помощью можно даже создать нечто столь впечатляющее, как покупательская тележка, использовать его в таких целях не слишком хорошая идея, если только вы не собираетесь постоянно обращаться к сценарию, закрываемому посреди обращения к нему. Кроме того, столь легкодоступный программный код может казаться слишком уж открытым для выполнения такого важного задания, как сохранение информации о состоянии при переходах от станицы к странице. Пока возможности сценариев на стороне клиента не станут более стабильными, Web-программисты, вероятно, должны использовать более традиционные механизмы управления состоянием, такие как файлы cookie, чтобы поддерживать состояние при переходах между страницами узла.
назад: Внутренние фреймы далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика