Как вставить в HTML iframe: пример использования
07.12.2015
Пока нет
Всем привет!
Продолжаем усердное изучение основ HTML. Я рад, что вы не бросаете уроки .
В этом уроке мы разберем, что такое фреймы
и как они создаются в HTML.
Итак, давайте определимся, что такое фреймы в HTML.
Фреймы
– это разделение окна браузера на отдельные области, в которых могут загружаться отдельные HTML документы.
Я думаю, вы поняли, что благодаря фреймам, вы можете просмотреть сразу несколько веб страниц в одном окне браузера.
Для примера, чтобы понять, как работает фрейм на практике, предлагаю посмотреть пример. Сделайте там пару переходов:
Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся вставлять фреймы в html-документ .
Создание фрейма на веб странице осуществляется по такому макету:
Внимание: макет фрейм-кода вставляется в html-документ вместо тега :
Фреймы○ тег frameset
Это главный контейнер для создания фрейма, внутри которого содержатся другие элементы.
Закрывающий тег обязательный.
*Атрибуты тега frameset:
- Cols - вертикальные
- Rows - горизонтальные
rows - горизонтально
cols - вертикально
В атрибутах cols и rows указывается, на сколько частей делить окно браузера. Вот, например, чтобы разделить окно браузера на две вертикальные части, нужно прописать вот так:
Левая часть экрана будет размером 30%, а правая – 70%.
Если хотите разделить браузер еще на несколько частей, допишите через запятую дополнительные размеры, вот, например, так:
В итоге первая вертикальная колонка будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.
Разобрались?
Так же и с горизонтальной разбивкой:
Первая горизонтальная колонка будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.
○ тег frame
Тег frame указывает, какой html-документ должен быть загружен в окно браузера.
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы «1.html
», «2.html
», «3.html
». Тег frame будет выглядеть вот так:
Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – «1.html
» на 30%
, «2.html
» на 70%
.
Вот готовый код:
Результат будет таким:
* Атрибуты тега frame
- src – адрес веб страницы. src="1.html" ;
- marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth="10" ;
- marginhight – отступ внутри фрейма по высоте. Пример: marginhight ="10" ;
- scrolling
– прокрутка фрейма через скролл.
- yes – скролл будет присутствовать во фрейме. Пример: scrolling ="yes" ;
- no – скролл не будет присутствовать во фрейме. Пример: scrolling ="no" ;
- auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling ="auto" ; - noresize – запрещает двигать границы фрейма.
- name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name ="сайт" ;
Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:
А вот пример, если прописать атрибут «name»:
Правда, так лучше?
Для любого фрейма пропишите атрибут «name»
там, где вы хотите, чтобы открывались в нем другие html-документы
Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame» , то помните, что каждое должно быть уникальным:
страница 2 страница 3
«Страница 1 », «Страница 2 » будут открываться в одном окне там, где вы указали имя фрейму «name ="сайт " » и «Страница 3 » откроется в другом фрейме, где было название «name ="bloggood-ru " »
ПРАКТИКА
Задание: Нужно создать фреймы вот по такому макету:
Вначале создадим три горизонтальных фрейма:
Теперь добавим «top.html» и «footer.html»
Результат пока что будет вот таким:
Теперь между «top.html» и «footer.html» добавим «menu.html» и «content.html» :
Готовый код:
Фреймы
Сохраните файл, как «index.html»
Создайте странички «top.html » , «footer.html» , «menu.html» и «content.html» :
Код файла «top.html»
шапка сайта сайт
Код файла «footer.html»
Файл footer.html StepkinBlog.com © 2015
Код файла «menu.html»
Файл menu.html – меню сайта
- Главная страница
- Об авторе
Код файла «content.html» :
Главная страница Главная страница Содержимое сайта - "Главная страница (content.html)"
Код файла «autor.html» :
Вот такой результат у меня вышел:
Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html» .
○ что делать если фреймы не поддерживаются браузером?
Можно вывести сообщение пользователю, что его браузер не поддерживает фреймы. Для этого вставьте тег
вовнутрь конструкции
:
○ Плавающий фрейм
Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»
* атрибуты тега «iframe»
- src - путь к открываемой странице
- width - ширина плавающего фрейма
- height - высота плавающего фрейма
- scrolling
- полоса прокрутки
- no - никогда не показывать полосу прокрутки
- yes - всегда показывать
- auto - показывать при необходимости - align
- выравнивание плавающего фрейма
- left – слева
- right – справа
- top – выше
- bottom – ниже - frameborder
- рамка вокруг плавающего фрейма
- 1 - включить рамку
- 0 - выключить рамку
Вот так будет выглядеть тег «iframe» с атрибутами:
Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы.
» между тегами
.
Это будет выглядеть вот так:
УПС! Ваш браузер не поддерживает фреймы.
Для примера давайте добавим к файлу «content.html» плавающий фрейм:
Главная страница Главная страница Содержимое сайта - "Главная страница (content.! Ваш браузер не поддерживает фреймы.
Предыдущая запись
Следующая запись
Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ. Фреймы прекрасно подходят для оформления следующих документов:
Обычные фреймы на данный момент считаются устаревшей технологией и не поддерживаются в HTML5. Не используйте обычные фреймы в своих проектах! В HTML5 тегов frame , frameset и noframes уже просто нет, вместо них предусмотрен один единственный тег iframe (встроенный или плавающий фрейм).
ТегТег - заменяет тег и используется для разделения экрана. Имеет закрывающий тег.
АтрибутыВ отдельном теге имеет смысл использовать только один из атрибутов – COLS или ROWS. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры ….
Пример
Результат:
Обратите внимание также на различие в порядке нумерации фреймов.
ТегТег , помещенный в контейнер …, определяет, что именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты
В следующем примере экран разбивается на две вертикальные области. В меньшей левой части находится оглавление, а в правую будут загружаться все остальные HTML-документы. В файле оглавления находятся простые текстовые гиперссылки на соответствующие разделы. Чтобы все работало, необходимо создать HTML-документы в файлах cosm.htm, eat.htm, perf.htm, massage.htm и manic.htm.
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Тег избавит вас от необходимости повторять атрибут TARGET в каждой отдельной гиперссылки, если все они указывают на одно и то же окно фрейма. Для этого надо поместить тег с атрибутом TARGET в контейнер ….
Использование тега даст возможность уменьшить размер файла оглавления left.htm предыдущего примера.
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Атрибут TARGET каждой конкретной ссылки замещает одноименный атрибут тега .
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Как уже упоминалось, имена фреймов не могут начинаться с символа подчеркивания, так как с него начинаются служебные имена, передающие броузеру особую информацию. Ниже перечислены специальные имена, каждое из которых используется для достижения определенного эффекта.
В основном эти служебные имена предназначены для того, чтобы тем или иным способом "вырваться" из текущей фреймовой структуры. Поэкспериментируйте с ними, чтобы понять, как можно загружать документы в различные окна.
ТегВ HTML 4.0 появились плавающие (или встроенные) фреймы. С помощью тега можно поместить один фрейм в обычный HTML-документ. Причем контейнер … здесь не нужен.
Закрывающий тег обязателен!
АтрибутыОпределяет, что будет показано в окне браузера если он не поддерживает фреймы.
Ваш браузер не поддерживает плавающие фреймы!
Как загрузить фрейм без дополнительных файлов?Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную HTML-код фрейма, а затем в качестве SRC тега указать "javascript:parent.имя переменной ".
var varFrame = " HTML-код "; ...
Проблема адресной строки при фреймовой структуре сайтаПри использовании фреймов на сайте используется одна страница, которая указывает местоположение фреймов.
Приведём пример такой страницы:
...
После загрузки этой страницы происходит загрузка информации во фреймы. Внутри этих фреймов происходят все переходы пользователя по страницам сайта. В адресной строке всегда отображается только путь к начальной странице, который не изменяется при переходах. Посетитель не знает, где он находится в данный момент.
Если посетитель сразу попадает не на главную страницу сайта (например, из поисковика), то это не приводит к воссозданию общей структуры фреймов. Это является причиной того, что владелец сайта не может указать адрес на внутреннюю страницу сайта.
Есть несколько решений этой проблемы
Ранее бал рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.
Идея заключается в следующем: при загрузке страницы, содержащей информационную часть, будем проверять окружение страницы и, если требуемая фреймовая структура отсутствует - создадим её при помощи скрипта.
Возможны три случая:
В первом случае после выполнения проверки никаких действий не требуется. Второй и третий практически идентичны, поэтому далее будем рассматривать только второй случай.
И так, посетитель попадает "куда не надо". В самое начало страницы вставляем скрипт, который будет создавать фреймовую структуру.
Реализация решения возможна как на стороне клиента, так и на стороне сервера. Основной недостаток реализации на стороне клиента очевиден - зависимость от возможностей и настроек клиента. Например, на компьютере пользователя запрещено выполнение скриптов. Второй вариант не будет работать, если на сервере нет поддержки PHP .
JavaScript-решение.При таком подходе есть ограничение - не все браузеры поддерживают JavaScript , а в ряде случаев пользователи сами отключают скрипты.
Вначале проверяем окружение страницы, а затем, в случае отсутствия требуемой фреймовой структуры, создаём её.
Создадим файл frame.js :
If (window.name != "main") { window.name="root"; document.write(""); document.write(""); document.write(""); document.write(""); }
Вначале мы проверяем название окна, в который загружается страница: if (window.name != "main") . Если имя окна и название фрейма не совпадают, значит надо создать фреймовую структуру. Это делается динамически с использованием метода write объекта document .
К каждой странице сайта подключаем файл frame.js . Теперь страницы сайта будут иметь такую структуру:
... ...
При таком подходе к решению данной задачи исчезает необходимость в файле, содержащем фреймовую структуру.
PHP-решениеПри таком подходе сайт станет доступным большему числу посетителей.
Проверять окружение страницы будем по другому (не так, как при использовании JavaScript ). Загрузку документа во фрейм будем выполнять с параметром frames=yes . При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.
Помещаем код в файл frames.php . Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.
frames ...
В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать HTML документ, описывающий фреймовую структуру.
.
В этом выпуске мы поговорим о фреймах . Фреймы по своей сути очень похожи на таблицы, но в отличие от таблиц, каждый фрейм независим и в каждом из них может быть отдельная web страница со своим адресом.
На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с рекламными баннерами, а в нижний – страницу с конта
ктной информацией. Вот вкратце что такое фреймы.
Теперь рассмотрим, как это все можно осуществить.
Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера BODY . Вместо него используется контейнер FRAMESET . Общий синтаксис фреймов выглядит следующим образом:
… ….
В контейнере …. располагаются теги , которые определяют содержимое фреймов.
У тега есть два параметра:
rows = число – количество строк (горизонтальных подокон).
cols = число – количество столбцов (вертикальных подокон).
Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана.
Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида:
Код, который определит нам такую структуру фрейма, будет выглядеть так:
В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ “*” (звездочка) означает занять все оставшееся место на экране.
Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:
Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях.
Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%.
Можно задавать размер фрейма символом “” (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например , то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).
Можно комбинировать варианты задания размеров фреймов. Например:
Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место.
С первой строкой кода разобрались полностью. Идем дальше.
Далее следуют теги . Поскольку через запятую в параметре cols тега frameset задано три числа (то есть будет три фрейма), то и тегов должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.
И в последней строке закрывается контейнер .
Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали.
Параметры rows и cols одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого.
У всех сейчас возник вопрос о том, как создать такую структуру, о которой я говорил в самом начале статьи. К этому вернемся чуть позже, а пока обратимся к тому, что у нас сейчас происходит в браузере.
В браузере мы видим три страницы, каждая из которых находится в своем фрейме.
При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов frame и frameset .
Параметры тегов frame и frameset :
src =”url” – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.
noresize – отменяет возможность изменения размеров. Используется только для frame .
scrolling=”yes/no/auto” – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame .
name=”frame-name” – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame .
border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.
framespacing=”число” – расстояние между фреймами. Используется только для frameset.
Используя эти параметры, можно получить страницу, у которой не отображаются границы между фреймами, нет возможности изменять размеры фреймов и у двух последних фреймов запретим скроллинг. Код такой страницы выглядит следующим образом:
|