Код фрейма. Iframe и Frame — что это такое и как лучше использовать фреймы в Html
Тег
Тег
Синтаксис
...
Параметры
align
Определяет как фрейм будет выравниваться по краю, а также способ обтекания
его текстом.
frameborder
Устанавливает, отображать границу вокруг фрейма или нет.
height
Высота фрейма.
hspace
Горизонтальный отступ от фрейма до окружающего контента.
name
Имя фрейма.
scrolling
Способ отображения полосы прокрутки во фрейме.
src
Путь к файлу, содержимое которого будет загружаться во фрейм.
vspace
Вертикальный отступ от фрейма до окружающего контента.
width
Ширина фрейма.
Закрывающий тег
Обязателен.
Пример 1. Использование тега
Тег IFRAME
Ваш браузер не поддерживает плавающие фреймы!
Описание параметров тега
Параметр ALIGN
Описание
Для плавающего фрейма можно указать его положение на веб-странице или задать
способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания
задается параметром align
тега
.
Синтаксис
...
Аргументы
absmiddle
Выравнивание середины фрейма по середине текущей строки.
baseline
Выравнивание фрейма по базовой линии текущей строки.
bottom
Выравнивание нижней границы фрейма по окружающему тексту.
left
Выравнивает фрейм по левому краю окна.
middle
Выравнивание середины фрейма по базовой линии текущей строки.
right
Выравнивает фрейм по правому краю окна.
texttop
Верхняя граница фрейма выравнивается по самому высокому текстовому элементу
текущей строки.
top
Верхняя граница фрейма выравнивается по самому высокому элементу текущей
строки.
Наиболее популярные параметры — left
и right
,
создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому
фрейма, рекомендуется в теге
добавить
параметр hspace
и vspace
,
задающих расстояние до текста в пикселах.
Значение по умолчанию
Пример 2. Выравнивание плавающего фрейма
Тег IFRAME, параметр align
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Параметр FRAMEBORDER
Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности.
Чтобы ее скрыть применяется параметр frameborder
.
Синтаксис
... ...
Аргументы
yes (или 1)
Отображает рамку вокруг фрейма.
no (или 0)
Скрывает рамку вокруг фрейма.
Значение по умолчанию
Пример 3. Сокрытие исходной рамки вокруг фрейма
Тег IFRAME, параметр frameborder
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров фрейма средствами HTML предусмотрены параметры width
и height
. Допускается использовать значения в пикселах
или процентах. Если установлена процентная запись, то размеры фрейма вычисляются
относительно родительского элемента — контейнера, где находится тег
.
В случае отсутствия родительского контейнера, в его качестве выступает окно
браузера. Иными словами, width="100%"
означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает
размер 300 х 150 пикселов.
Синтаксис
... ...
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
width — 300 пикселов, height — 150 пикселов.
Пример 4. Ширина и высота фрейма
Тег IFRAME, параметр width
Параметр HSPACE и VSPACE
HTML:
3.2
4
XHTML:
1.0
1.1
Описание
Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали
с помощью, соответственно, параметров hspace
и
vspace
. Особенно это актуально при обтекании содержимого
фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на
границу фрейма, необходимо вокруг него добавить пустое пространство.
Для указания имени используется набор символов, включая числа и буквы. При
обращении к фрейму по имени соблюдайте то же написание, что и в параметре name
.
Значение по умолчанию
Тег IFRAME, параметр name
Чебурашка
Крокодил Гена
Шапокляк
Параметр SCROLLING
Описание
Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются
полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки
нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления
отображением полос прокрутки используется параметр scrolling
.
Синтаксис
...
Аргументы
auto
Полосы прокрутки добавляются браузером только по необходимости, в том случае,
когда содержимое фрейма превышает его видимую часть.
no
Запрещает отображение полос прокрутки.
yes
Всегда вызывает появление полос прокрутки, независимо от объема информации.
Значение по умолчанию
Пример 7. Сокрытие полос прокрутки
Тег IFRAME, параметр scrolling
Параметр SRC
Описание
Указывает адрес файла (URL), который будет загружаться во фрейм. Это может
быть HTML-документ, изображение или серверная программа. Допустимо использовать
не только путь к файлу, но также имя функции JavaScript, которое возвращает
значение.
Синтаксис
...
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Пример 8. Путь к файлу
Тег IFRAME, параметр src
Теги фреймов
FRAME определяет свойства отдельного фрейма, на которые делится окно браузера.
FRAMESET определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME.
IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
NOFRAMES отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега NOFRAMES.
Долго думал, как назвать статью, лучше не придумал. Но сейчас вы сразу поймете в чем суть. У вас есть сайт, вы пишите на нем статьи и это здорово. Но чего-то не хватает? Человек пришел, почитал, и ушел, возможно, навсегда. А вам так хочется, чтобы он не раз вернулся на ваш сайт. А куда люди возвращаются чаще всего? Правильно, на сервисы!
Но сделать на своем сайте даже небольшой сервис, типа или сокращателя ссылок могут не все, нужен некоторый опыт. Но что мешает нам показывать чужой сервис на своем сайте? Практически ничего! Как это сделать? Вот тут и уместно название статьи: как вставить сайт на сайт?
Для профи я не сделаю открытия, в для новичков это будет, скорее всего, полезно. Хотя, если честно, я ни разу не видел такого подхода ни на одном блоге. А зря, все эти фишки часто дают хороший результат. Хороший пример - это мой способ получения обратных ссылок, . Результат - 38512 ссылок, и все естественные 😉
В этом же случае все решается банальным iframe. Сразу перейду к практике: я порой пользуюсь сервисом сжатия png картинок. Есть замечательные онлайн сервисы, ими можно пользоваться без проблем. Но тут есть минус: нужно постоянно держать в уме или в закладках все эти сервисы, вы покидаете свой сайт и пользуетесь чужим. А так, если вставить сайт в сайте iframe, то вы будете пользоваться сервисом (да и не только вы) не покидая своего сайта!
Я уже сегодня сделал на отдельной странице себе такой псевдосервис - (естественно, в заглавии хороший НЧ запрос, и в поясняющем тексте тоже)
СОВЕТ ВЕБМАСТЕРУ:
Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:
1. Payoneer
- Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.
2. EpayService
- Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.
3. Skrill
- Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.
4. AdvCash
- Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.
5. Payeer
- Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.
Домен RU - 99 руб
Домен РФ - 99 руб
Тег (от англ. i
nline frame
- встроенная рамка)
создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный элемент. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между тегами и .
Синтаксис
...
Закрывающий тег обязателен.
WAI ARIA
Нет значения role по-умолчанию.
Допустимые значения role:
application
document
Атрибуты
allowfullscreen - Разрешает для фрейма полноэкранный режим.
height - Высота фрейма.
name - Имя фрейма.
sandbox - Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling - Способ отображения полосы прокрутки во фрейме.
seamless - Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src - Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc - Хранит содержимое фрейма непосредственно в атрибуте.
width - Ширина фрейма.
allowfullscreen
Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.
Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name .
Значение по умолчанию
sandbox
Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.
Синтаксис
Значения
allow-forms - Позволяет содержимому фрейма отправлять формы.
allow-modals - Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.
allow-orientation-lock - Позволяет отключать возможность блокировки экрана.
allow-pointer-lock - Позволяет фрейму использовать Pointer Lock API.
allow-presentation - Разрешает фрейму использовать Presentation API.
allow-same-origin - Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.
allow-scripts - Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.
allow-top-navigation - Позволяет открывать ссылки фрейма в родительском документе.
Допустимо писать несколько значений в любом порядке через пробел. Если указано пустое значение, то устанавливаются все возможные ограничения.
При одновременном использовании значений allow-scripts и allow-same-origin , когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.
Значение по умолчанию
scrolling
Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .
Синтаксис
...
Значения
auto - Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
no - Запрещает отображение полос прокрутки.
yes - Всегда вызывает появление полос прокрутки, независимо от объёма информации.
Значение по умолчанию
seamless
Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:
игнорируется атрибут sandbox , если содержимое фрейма и родительского документа взяты из одного источника;
ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
стили родительского документа применяются и к содержимому фрейма;
фрейм считается блочным элементом, у которого ширина задана как auto ;
высота формируется автоматически на основе содержимого.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
src
Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.
Синтаксис
...
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
srcdoc
Позволяет установить содержимое фрейма непосредственно в атрибуте. Значение должно иметь корректный синтаксис HTML, по желанию содержать и , а также любое количество пробелов, переносов строк, комментариев и других элементов. При одновременном использовании атрибутов src и srcdoc , атрибут src игнорируется.
Синтаксис
...
Значения
HTML-код содержимого, включая необходимые теги.
Значение по умолчанию
width
Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента - контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.
Синтаксис
Значения
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
width - 300 пикселей, height - 150 пикселей.
Спецификации
Примеры
IFRAME
Ваш браузер не поддерживает встроенные фреймы!
Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при .
В конце статьи, после детального описания процесса создания встроенных фреймов и их классической структуры в Html коде (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим возможные способы их применения в текущий период времени на примере моего блога.
Что это такое и чем отличается Iframe от Frame
Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.
Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.
В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит основное преимущество использования фреймов
в Html.
Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).
Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.
Iframe — встроенный фрейм в стандарте Html 5
Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.
Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.
Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент
. Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.
Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. имеется еще и закрывающий тег
:
В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты Width и Height
, значения которых задаются в пикселах:
Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.
Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты Hspace и Vspace
, которые позволяют задать отступы от границ фрейма до обтекающего его текста.
Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же Align
, но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.
Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).
Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":
Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.
Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.
Как я уже упоминал, наглядным примером использования Iframe является :
Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.
Фреймы на основе тегов Frame и Frameset — их структура
Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов Frameset
.
Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):
Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента Frame
. Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.
Третий элемент, который мы еще с вами не затронули — это Noframes
. Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.
Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.
Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.
Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — Cols и Rows
. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.
Создание структуры на основе Frameset и его атрибутов Cols и Rows
В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.
Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.