Веб-инструмент
Веб-мастерская
Фрейм в переводе с английского означает рамки. HTML-страница, в которой используются фреймы разделена на несколько частей ограниченными рамками. Окно браузера может быть разделено на несколько фреймов. Фрейм представляет собой прямоугольную область окна браузера, в которую можно загрузить HTML-документ. Разбиение окна на фреймы происходит с помощью HTML-кода, содержащегося в отдельном HTML-файле, который называют установочным. Установочный файл содержит только теги разметки фреймов, т.е. их относительное расположение, размеры, ссылки на загружаемые документы и другие параметры фреймов. В нем не должны присутствовать теги других элементов и текстовая информация, за исключением тега <META>. В установочном файле можно написать сценарий, создающий фреймовую структуру документа.
Java Script не влияет на создание фреймов в документе. Для создания фреймов используются теги <frameset> и <frame>. Простейший документ с набором фреймов выглядит следующим образом:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание фреймов</title>
</head>
<frameset rows="50%,50%">
<frame name="Frame1" src="document1.html">
<frame name="Frame2" src="document2.html">
</frameset>
</html>
В теге <frameset> указано свойство rows. Это свойство обозначает ряды и указывает на то, что два фрейма расположены рядами, друг над другом. Верхний фрейм загружается страницей document1.html, нижний document2.html. Если мы хотим расположить фреймы столбцами то вместо свойства rows, надо указать свойство cols. Процентные величины "50%,50%" указывают относительные размеры окон фреймов. Этот размер может быть задан в пикселах.
Приведенный HTML-документ(он не отображается для пользователя) определяет набор фреймов. Каждый из них должен содержать URL(заданный атрибутом src) документа, загружаемого во фрейм. Присвоение имени каждому фрейму с помощью атрибута name упрощает написание сценариев.
Фреймы могут быть расположены друг в друге. Вот пример такого расположения.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование фреймов</title>
</head>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame name="frame1" src="249.html">
<frame name="frame2" src="250.html">
</frameset>
<frameset rows="33%,33%,33%">
<frame name="frame3" src="251.html">
<frame name="frame4" src="252.html">
<frame name="frame5" src="253.html">
</frameset>
</frameset>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Для установления толщины рамки фрейма можно воспользоваться свойством border в теге <frameset>. Если border=0, то рамки будут невидимыми.
Для одного документа без фреймов объектная модель состоит из единственного объекта window, в котором содержится документ.
В такой структуре объект window является начальной точкой для ссылок на любой загруженный объект. Поскольку окно всегда присутствует(чтобы мог быть загружен и представлен документ), в ссылках на объекты в документе, объект текущего окна можно не указывать.
В простой модели с двумя фреймами в объектной модели браузера возникает иерархия объектов, в которой главное окно браузера представляется в виде главного, родительского фрейма, а созданные два фрейма являются дочерними фреймами или фреймами-потомками. При разбиении любого из этих фреймов на следующие два фрейма, последние являются дочерними для исходного. Между возникают отношения "родители-потомки"("родители-дочки").
При запуске браузера объект главного окна window формируется автоматически. Если в это окно загружается документ с фреймовой структурой, то главное окно получает статус родительского фрейма по отношению ко всем остальным. Каждый тег <FRAME> внутри контейнера <FRAMESET> создает собственный объект window, в который загружается соответствующий документ. Каждому из фреймов соответствует свой объект document. Объекту document соответствует единственный контейнер – фрейм. Хотя родительский объект не виден пользователю, он все равно присутствует в объектной модели.
На вершине иерархии находится окно браузера window. Оно поделено на два фрейма с именами frame1 и frame2. Объект window является родительским по отношению к дочерним frame1 и frame2. Для ссылки на родительское окно используется ключевое слово parent.
Если пользователь активизирует некоторую ссылку в первом фрейме, а соответствующий документ должен загрузиться не в тот же фрейм а в другой, то для решения этой задачи необходимо рассмотреть три случая:
Между объектом window и объектами frame1 и frame2 существует прямая связь "родитель-потомок". Поэтому если мы пишем сценарий в установочном файле, создающим эти фреймы, то к фреймам можно обращаться по имени, как показано на рисунке.
Иногда может потребоваться доступ к родительскому окну. Это бывает необходимо, если требуется при следующем переходе убрать все фреймы. Удаление фреймов означает лишь загрузку нового документа вместо содержащего фреймы – в рассматриваемом случае загрузку документа в родительское окно. Это можно сделать с помощью свойства parent. Чтобы загрузить новый документ, следует использовать объект location из родительского окна(каждый фрейм имеет свой объект location): требуется внести в location.href родительского окна новый URL-адрес. Чтобы загрузить новый документ в родительское окно, нужно записать следующее:
parent.location.href ="URL-адрес_документа"
Если нам потребуется обеспечить доступ из одного фрейма-потомка к другому , то мы должны сначала обратиться к родительскому окну, затем к нужному нам фрейму и лишь потом к объекту document. Это происходит потому, что между фреймами-потомками нет прямой связи. Поэтому мы не можем вызвать frame2, находясь во frame1.
parent.frame2.document.write("Привет из первого фрейма!")
Рассмотрим, как можно изменить элемент в одном фрейме из другого. При щелчке на тексте из правого фрейма изменится один из текстовых элементов.
Пишем установочный файл.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание фреймов</title>
</head>
<frameset cols="40%,40%">
<frame name="Frame1" src="doc1.html" scrolling="no">
<frame name="Frame2" src="doc2.html">
</frameset>
</html>
Документ в левом фрейме doc1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание фреймов</title>
</head>
<body>
<h1 id="myh">Это Frame1 </h1>
</body>
</html>
Документ в правом фрейме doc2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание фреймов</title>
<script language="JavaScript">
function myFun() {
parent.Frame1.document.all.myh.innerText="Чего изволите?"
}
</script>
</head>
<body>
<h1 onClick="myFun()">Это Frame1-щелкни здесь </h1>
</body>
</html>
Теперь откроем установочный файл в веб-браузере. Это будет выглядеть ТАК.
В теле функции myFun(), которая делает нужные изменения, происходит обращение к левому фрейму с именем Frame1(задается в установочном HTML-файле) через parent. Далее, document.all.myh обеспечивает доступ к элементу с идентификатором myh(заголовок первого уровня). Здесь all – коллекция всех элементов документа. Изменение элемента происходит за счет присвоения значения свойству innerText ("Чего изволите?").
Изменения в одном фрейме по событию другом происходит без перезагрузки HTML-документа. Для изменения элементов можно еще использовать свойства outerText, innerHTML, outerHTML.
Описанным выше способом можно организовать такой сценарий: щелчок на миниатюре(маленьком графическом изображении) в одном фрейме выводит в нем же полномаштабную картинку, а в другом краткое описание.
Создаем документ в первом фрейме 254.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование фреймов</title>
</head>
<body >
<h1 id="myP">Freme1</h1>
</body>
</html>
Создаем документ с большой картинкой 255. html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование фреймов</title>
</head>
<body>
<img id="mysrc1" src="images/foto15.gif" width="440" height="260">
</body>
</html>
Создаем документ во втором фрейме 258.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование фреймов</title>
</head>
<body>
<h1 id="myP">Freme2</h1>
</body>
</html>
Создаем документ в третьем фрейме 257.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование фреймов</title>
<script language="JavaScript">
function myFuns(){
parent.frame1.location.href="images/foto15.gif"
parent.frame2.document.all.myP.innerText=" Это Тимофей"
}
</script>
</head>
<body >
<h1>Frame3</h1>
<img src="images/foto14.gif" onClick="myFuns()"> //иконка
<p style="color:#0000FF"><strong>Щелкни по картинке </strong></p>
</body>
</html>
Создаем установочный файл 256.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование фреймов</title>
</head>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame name="frame1" src="254.html" scrolling="no">
<frame name="frame2" src="258.html" scrolling="no">
</frameset>
<frame name="frame3" src="257.html" scrolling="no">
</frameset>
<body>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Фреймы удобно использовать при создании навигационных панелей. В одном фрейме располагаются ссылки, а второй предназначен для отображения документов, вызываемых при активации соответствующих ссылок. При активации ссылки документ загружается не в тот же фрейм, где находятся ссылки, а в другой.
Рассмотрим пример создания навигационной панели. Окно браузера разделено на два фрейма:
Создаем установочный файл.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Навигационная панель</title>
</head>
<frameset cols="25%,75%">
<frame name="menu" src="menu.html" >
<frame name="main" src="start.html" >
</frameset>
</html>
Где, start.html – документ, будет первоначально показан во фрейме main; menu.html – навигационная панель
Создаем документ menu.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>
<script language="JavaScript">
function load(url){
parent.main.location.href=url
}
</script>
</head>
<body>
<a href="javascript:load('первый.html')">Первый</a>
<a href="второй.html" target="main">Второй</a>
<a href="третий.html" target="top">Третий</a>
</body>
</html>
Вставте свои значения в URL-адреса страниц.
В окне веб-браузера это будет выглядеть ТАК.
Здесь показано несколько способов загрузки новой страницы во фрейм main. В первой ссылке используется функция load(). Вместо атрибута target указания на фрейм выполняет функция. Функция load() в качестве параметра передается строка 'первый.html', указывающая, какой файл следует загрузить. При этом место, куда он будет загружен, определяется самой функцией load().
Во второй ссылке используется атрибут target.
Третья ссылка показывает, как можно избавться от фреймов.
Чтобы удалить фреймы с помощью функции load(), достаточно написать в ней следующую строчку:
paren.location.href=url
Атрибут target в теге ссылки <a href= ...> обычно применяется в тех случаях, когда требуется загрузить одну страницу в один фрейм. Язык сценариев используют, если необходимо при активации ссылки выполнить несколько действий, например, загрузить несколько страниц в разные фреймы.
Для ссылок из родительского окна к объектам его дочерних фреймов можно воспользоваться коллекцией frames всех фреймов. Коллекция фреймов представляет собой массив объектов фреймов. Обратиться к конкретному фрейму из этой коллекции можно по индексу или по имени фрейма, указанного в качестве значения атрибута NANE в теге <FRAME>:
window.frames[индекс]
window.имя_фрейма
Индекс 0 соответствует первому дочернему фрейму в порядке, определенном следованием тегов <FRAME> в контейнере <FRAMESET>.
Приведенные выше шаблоны ссылок на фреймы из родительского окна используются как префексы в полных ссылках к объектам, содержащимся во фреймах. При этом следует помнить, что если нас интересуют объекты документа, загруженного во фрейм, то прежде чем обратиться к ним, нужно упомянуть объект document.
window.frames(0).document.all.Myinput.value
window.Frame1.document.all.Myinput.value
Cсылка из дочернего фрейма непосредственно на родительский производится с помощью ключевого слова parent. Если имеется еще один фрейм более высокого уровня, то ссылка на него выглядит так:
parent.parent
Аналогичным образом можно построить ссылку из дочернего фрейма до прапрадедушки. Чтобы сразу обратиться к родительскому окну, находящемуся на вершине иерархии, можно использовать ключевое слово top.
При использовании ссылки top следует учитывать то обстоятельство, что ваш сайт может быть загружен в один из фреймов другого сайта. В этом случае указанный вами объект top окажется совсем иным и ссылки, построенные с его использованием, не будут правильно работать. Поэтому рекомендуется использовать parent для ссылок на вышестоящий фрейм (окно).
Похожие материалы по теме: Фреймы. Разделение окна веб-браузера на несколько областей
Обсудить на форуме