Содержание

| HTML | WebReference

Элемент <iframe> (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

<iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный элемент. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между тегами <iframe> и </iframe>.

Закрывающий тег

Атрибуты

align
Определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
allowfullscreen

Разрешает для фрейма полноэкранный режим.
allowtransparency

Устанавливает прозрачный фон фрейма, через который виден фон страницы.
frameborder
Устанавливает, отображать границу вокруг фрейма или нет.
height
Высота фрейма.
hspace
Горизонтальный отступ от фрейма до окружающего контента.
marginheight
Отступ сверху и снизу от содержания до границы фрейма.
marginwidth
Отступ слева и справа от содержимого до границы фрейма.
name
Имя фрейма.
sandbox
Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling
Способ отображения полосы прокрутки во фрейме.
seamless
Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src
Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc
Хранит содержимое фрейма непосредственно в атрибуте.
vspace
Вертикальный отступ от фрейма до окружающего контента.
width
Ширина фрейма.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>IFRAME</title> </head> <body> <iframe src=»page/banner.html» align=»left»> Ваш браузер не поддерживает встроенные фреймы! </iframe> </body> </html>

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Тег | HTML справочник

HTML теги

Значение и применение

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

Обращаю Ваше внимание, на то что некоторые сайты, например такие как поисковые системы, блокируют возможность размещения страницы сайта во фреймах, либо осуществляют переход по таймеру на свою «реальную» страницу.

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
alignleft
right
top
middle
bottom		Не поддерживается в HTML5.
Определяет выравнивание элемента в соответствии с окружающими элементами.
frameborder0
1		Не поддерживается в HTML5.
Указывает, следует ли отображать рамку вокруг элемента.
heightpixelsОпределяет высоту элемента.
longdescURLНе поддерживается в HTML5.
Указывает страницу, содержащую длинное описание содержания элемента.
marginheightpixelsНе поддерживается в HTML5.
Отступ сверху и снизу от содержания до границы фрейма.
marginwidthpixelsНе поддерживается в HTML5.
Указывает отступ слева и справа от содержания до границы фрейма.
nametextЗадаёт имя элемента.
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation		Включает дополнительный набор ограничений для содержания в элементе.
scrollingauto
yes
no		Не поддерживается в HTML5.

Указывает, отображать или нет полосы прокрутки в элементе.
srcURLОпределяет адрес документа для встраивания в элемент.
srcdocHTML_codeУказывает HTML-код, который будет показан во фрейме.
widthpixelsОпределяет ширину элемента.

Пример использования

В этом примере мы возьмем в качестве загрузки во фрейм отличный сайт — TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.com"></iframe><br> <!-- в атрибуте src указываем абсолютный адрес сайта, который хотим открыть во фрейме -->
		<a href = "https://tinypng.com" target = "myframe">TinyPng</a> <!-- указываем, что ссылка откроется во фрейме -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
	</body>
</html>

В этом примере мы:

  • Элементом <iframe> создали фрейм, которому атрибутом name задали имя — «myframe», атрибутом width установили ширину фрейма «665px», а атрибутом height высоту фрейма «265px» . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме «https://tinypng.com».
  • Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма — «myframe»).
    Первая ссылка     открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:

Пример использования фреймов в HTML.

Рассмотрим пример добавления видео с YouTube во фрейм:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

  • autoplay = «1» (видео автоматически запускается).
  • loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
  • start = «28» (определяет с какой секунды начнется воспроизведение видео, значение длжно быть положительным целым числом).
  • color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:

Добавление видео с YouTube во фрейм.

Более подробную информацию о добавлении видео с видео хостинга YouTube вы можете найти на сайте в статье учебника HTML 5 «Размещение видео с видео хостинга YouTube».

Отличия HTML 4.01 от HTML 5

В HTML5 добавлено два новых атрибута, большинство используемых в HTML 4.01 атрибутов было удалено.

Значение CSS по умолчанию

iframe [seamless] {
display: block;
}

iframe:focus {
outline: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

примеры применения, различии с frame

Элемент

Frames

Что же делает <iframe>?

Как вставить страницу в страницу HTML? Для этого нужно использовать <iframe>, который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ.

Отображение

Display block.

Пример кода

<iframe src="https://www.youtube.com/embed/owsfdh5gxyc" frameborder="0" allowfullscreen></iframe>

Еще в старые недобрые времена веб-дизайна было много <frame> элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент <frame> был объявлен устаревшим в HTML5. Но <iframe> или «встроенный фрейм» по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.

Оба этих элемента позволяют создать отдельный HTML-документ. Ссылка на содержимое документа, на который ссылается текущая веб-страница, указывается в атрибуте src.

<!—Вы можете сделать так --> <iframe src="http://example.com"></iframe> <!—Но вы не можете сделать так --> <iframe> <!DOCTYPE html> <html> <head> . . . </head> <body> . . . </body> </html> </iframe>

Основное различие между <iframe> и <frame> заключается в том, что <iframe> обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое <iframe> отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube:

<iframe src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen></iframe>

Видео явно на HTML странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей (фреймов), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.

Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать <iframe> и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript. Пожалуйста, не делайте этого.

Существует несколько допустимых вариантов использования <iframe> для создания HTML страницы:

  • встраивание стороннего медиа контента;
  • встраивание собственного медиа контента через кроссплатформенный документ;
  • встраивание примеров кода;
  • встраивание сторонних «апплетов» в качестве форм оплаты.

А вот некоторые ужасные варианты использования <iframe>:

  • Фотогалерея;
  • форум или чат.

Если вам нужно встроить независимые, уже существующие HTML-документы в текущий, используйте <iframe>. Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.

Название атрибутаЗначениеОписание
sandboxAllow-same-origin
Allow-top-navigation
Allow-forms
Allow-scripts		Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу.
scrollingyes no autoОпределяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS.
NameназваниеЗадает имя фрейма.
Alignleft right top
middle bottom		Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS.
frameborderyes (или 1)
no		Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS.
longdescURLИспользуется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS.
marginwidthпикселиИспользуется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS.
srcURLОпределяет URL-адрес документа для отображения в IFRAME.
vspaceпикселиУстанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS.
widthпиксели %Определяет ширину фрейма на HTML странице.

Данная публикация представляет собой перевод статьи «<iframe>» , подготовленной дружной командой проекта Интернет-технологии.ру

Что такое фреймы (iframe) в HTML — примеры как сделать и вставить фрейм

Доход Увеличивай доход с RoyClub!

Пассивный доход до 20% в месяц на парамайнинге PRIZM. Вывод средств в любое время. 9-уровневая партнерская программа. Получай прибыль из любой точки мира. Не упусти свой шанс!

что такое фрейм

В статье о фреймах в HTML я расскажу о том что это такое, как их правильно использовать и вставлять.

В переводе с английского, фрейм это рамка. И в HTML (что такое HTML?) значение похожее. Фрейм — это совершенно отдельный прямоугольный элемент (область) окна браузера, который содержит и показывает свой HTML-документ. Да, в вместе с другими документами в одном и том же окне браузера. Чудеса!

Фрейм это как отдельная ячейка таблицы, содержание которой подгружается с другой страницы. Фреймы универсальны и независимы друг от друга, каждый из фреймов размещенных на странице может иметь свой адрес и свои подгружаемые стили.

Самое главное, что если вы нажмете на ссылку во фрейме, подгружаться это все дело будет внутри фрейма, не затрагивая остальные элементы вебсайта. Именно поэтому фреймы раньше довольно часто использовались для навигации по сайту. Сейчас используют классический вариант (как вставить правильно ссылку в HTML?)

На сегодняшний день, в 2016 году, использовать фреймы на сайтах не рекомендуется в основном представителями поисковых сервисов. Связано это с тем что ПС приводят пользователя на определенную страницу, определяя ее текстовую релевантность, а вот во фрейме вебмастер может подгружать что угодно, поэтому поисковый робот сталкивается с препятствиями определения релевантности такой страницы.

Но небольшим элементам сайта это не вредит — например когда идет речь о встраивании видео при помощи iframe с видеохостинга Youtube.com.

Правила вставки фреймов

Свойства фрейма определяется тегом <frame> — он поддерживается во всех браузерах (в т.ч. мобильных). Тег <frame> помещается в контейнер <frameset>. И, если фрейм участвует в определении свойств одного фрейма, то фреймсет дополнительно размечает страницу сайта на области. И уже в эти области, вы можете подгрузить фрейм с параметром src=””.

Пример синтаксиса:

<frameset>
<frame src=»ссылка на подгружаемый документ» name=»имя фрейма»>
</frameset>

Надеюсь вы обратили внимание на то, что в этом теге не требуется закрывающий тег типа </frame>, а вот для <frameset> — требуется. Список атрибутов фреймов:

  • bordercolor — определяет цвет пограничной линии (границы)
  • frameborder — задает рамку вокруг фрейма или ее отсутствие
  • name — используется для задания уникального имени (не обязателен, но рекомендован) — это нужно чтобы иметь возможность задавать ссылку к конкретному фрейму
  • noresize — параметр для определения возможности пользовательского редактирования (мышкой) размера области фрейма
  • scrolling — задает отображение внутрифреймовой прокрутки в том случае если содержимое фрейма не помещается в его физические размеры, может принимать следующие значения: yes, no, auto
  • src — последний и самый главный параметр — в нем указывается путь (адрес) к файлу или странце, которую вы хотите подгрузить внутри фрейма
  • marginwidth — с помощью этого параметра можно задать отступ от содержимого фрейма до его левого края
  • marginheight — а с помощью этого параметра мы задаем отступ от содержимого фрейма до его верхнего края

Пример использования трех <frame> и двух <frameset>:

<frameset>
  <frame src=»header.html» name=»headerFrame» scrolling=»no» noresize>
  <frameset>
    <frame src=»1.html» name=»Frame1″ scrolling=»no» noresize>
    <frame src=»2.html» name=»Frame2″>
  </frameset>
</frameset>

Либо такой вариант, показываю для примера использования вместе с разметкой html страницы:

<html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
    <head>
        <title>Фреймы</title>
    </head>
    <frameset rows=»10%, 80%, 10%» >
        <frame>                
        <frame>
        <frame>
    </frameset>
</html>

Результат:

пример фрейма в html

Еще пример:

<html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
    <head>
        <title>Фреймы</title>
    </head>
    <frameset rows=»100, *» >
        <frame>
          <frameset cols=»200, *» >
              <frame>
              <frame>
          </frameset>
    </frameset>
</html>

Результат:

фреймы в html

Последний пример фрейма в HTML:

<html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
    <head>
        <title>Фреймы</title>
    </head>
    <frameset cols=»20%, *» >
        <frame>
          <frameset rows=»30%, *» >
              <frame>
              <frame>
          </frameset>
    </frameset>
</html>

Результат:

как вставить фрейм в html

Как вы видите, frameset в данном случае указывает браузеру, как разбить окно браузера на две-три области — в данном случае тег используется вместо тегов

. Подобное построение шаблона сайта называется фреймовой структурой.

Фреймсет тоже имеет параметры:

  • rows — определяет количество горизонтальных областей, на которые будет разбито окно: для задания четырех горизонтальных областей с шириной 25% нужно задать параметр rows=”25%, 25%, 25%, 25%”
  • cols — аналогично горизонтальным областям, только теперь определение вертикальных областей

А для того чтобы фреймсет не имел рамок, используйте следующие атрибуты: border=”0″ frameborder=”0″.

Frame — плюсы и минусы фреймов

Теперь, после того как я рассказал вам теорию и показал на практике HTML код с использованием фреймов, настало время упомянуть о преимуществах и недостатках сайтов, использующих фреймы в своей структуре.

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

К еще большему сожалению, недостатки тоже есть и, увы, их целых три:

1. Структура фреймов может запутать даже бывалого вебмастера.

2. Из-за того что меню располагается в отдельном файле, пользователь который находит отдельную страницу в поисковой системе переходит на нее и не имеет навигации, ведь если мы вставим еще одну навигацию на эту страницу, на основной она будет дублироваться.

3. Несмотря на то, что все браузеры поддерживают фреймы, не все из них поддерживают фреймовую структуру. Поэтому необходимо делать двойную работу, размещая внутри тегов

теги — который будут отображаться, если браузер не поддерживает фреймовую структуру. То есть в любом случае мы делаем сайт без фреймов (для тех браузеров, которые их не поддерживаю) — зачем нам тогда фреймовая структура?

Это значит, что не имеет смысла создавать фреймовую структуру у сайта, если для этого нет каких-то конкретных причин. Я кратко расскажу о том, что это могут быть за причины.

Так где все-таки возможно применять фреймы?

Чаще всего это справочно-административные системы:

1. Для оформления оглавления. Размещение вертикального столбца очень удобно для пользователя, чтобы он в любой момент мог к нему обратиться, не обращаясь к кнопке «Назад». Так, оглавление справочной систему будет всегда под рукой сотрудника или пользователя.

2. Для оформления неподвижных элементов административной системы — графических элементов, таблиц, важных ссылок. Чтобы они были всегда доступны, а остальная часть прокручивалась бы в другом фрейме.

3. Для оформления форм и результатов запросов. Очень удобно в одном фрейме вводить данные, а в соседнем — получать ответ на запрос или видеть введенные данные в какой-то важной таблице.

Читайте также:

  • Подробные рекомендациии о том, как правильно оформить сайт в интернете.

На этом все, но помните, что в HTML5 не допускается использование <frame>, <noframes> и <frameset> — потому что технология устаревшая и не поддерживается. Взамен этого разработчики спецификации HTML5 предлагают нам использовать тег <iframe> для отображения плавающего или встроенного в сайт фрейма.

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <iframe> определяет встроенную область (рамку), которая может отображать содержимое отдельно взятого документа или даже другого веб-сайта в ограниченном пространстве на текущей веб-странице. Содержимое внутри области существует независимо от окружающей страницы. Две страницы: родительская и дочерняя, отображаемая в рамке, могут взаимодействовать друг с другом через JavaScript или серверный язык программирования.

Атрибут src указывает URL-адрес страницы для загрузки во встроенную область, но сам элемент <iframe> также может содержать текст или разметку в качестве резервного содержимого для отображения в браузерах, не поддерживающих этот элемент (например: очень старые браузеры, текстовые браузеры и так далее).


<iframe src="news.html">
  <p>Извините, но ваш браузер не может отобразить содержимое фрейма, но
    вы можете сами перейти на <a href="news.html">страницу с новостями</a>.
  </p>
</iframe>

Любые CSS стили, применяемые к родительскому элементу, не будут применяться к содержимому встроенной области, также как стили, примененные к встроенному содержимому, не будут распространяться на родительский элемент.

Можно указать размер для встроенной области с помощью необязательных атрибутов width и height или с помощью CSS. Обычно размер по умолчанию равен 300px в ширину и 150px в высоту, но, в зависимости от браузера, размер может быть иным. Большинство браузеров по умолчанию отображают содержимое элемента <iframe> с узкой рамкой, которую можно изменить или удалить с помощью CSS свойства border.

Если содержимое тега <iframe> превышает размеры элемента, то появляются полосы прокрутки, позволяющие пользователям прокручивать содержимое во встроенной области. Вы можете отключить полосы прокрутки с помощью CSS объявления overflow: hidden, но в этом случае у пользователя не будет возможности увидеть скрытое содержимое.

Атрибуты

height:
Указывает высоту элемента в пикселях. Пример »
name:
Определяет имя для элемента.

Значение этого атрибута может быть использовано для ссылки на элемент в JavaScript, либо в качестве значения для атрибута target элемента <a> или <form>, либо в качестве значения для атрибута formtarget элемента <button> или <input>. Пример »

sandbox:
Применяет набор ограничений на содержимое встроенной области в качестве меры безопасности в случае, если в ней отображается ненадежный веб-сайт.

Значением атрибута может быть либо пустая строка (sandbox=»»), это значение указывает, что применяются все ограничения, либо список определенных значений, разделенных пробелами, которые будут снимать конкретные ограничения:

  • «» — применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
  • allow-forms — разрешает отправку данных форм.
  • allow-same-origin — указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе.
  • allow-scripts — разрешает выполнение сценариев (исключая всплывающие окна).
  • allow-top-navigation — разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу.

Примечание: атрибут sandbox не поддерживается в IE9 и более ранних версиях, и в Opera.

seamless:
Указывает, что содержимое iframe должно выглядеть так, словно оно является частью документа (без рамки и полос прокрутки). Возможные значения логического атрибута seamless: 

<iframe seamless>
<iframe seamless="">
<iframe seamless="seamless">

Примечание: атрибут seamless поддерживается только в Chrome и Safari6+.

src:
Указывает адрес документа, который будет отображен во встроенном фрейме. Пример »
width:
Указывает ширину элемента в пикселях. Пример »

Тег <iframe> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}

Пример


<iframe src="www.puzzleweb.ru/html/iframe.html">
  Ваш браузер не поддерживает iframe!
</iframe>

Результат данного примера в окне браузера:

Пример использования тега <iframe>

Что такое iFrame? | SEO блог

Всем привет! Я уже анонсировал несколько iFrame-партнерок, но что значит само понятие iFrame или тег iFrame, для многих осталось загадкой. В данной статье я постараюсь разъяснить, что это значит, для чего это нужно и как можно заработать с iFrame.

iframeiframe

Понятие iFrame можно определить следующим образом: на одном сайте одновременно подгружается еще один или несколько сайтов во фрейме или, как часто говорят, в фоне, поэтому понятие iFrame-трафик часто упоминают как фоновый трафик.

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

<iframe src=”http:/mysite.com” width=”468″ height=”60″></iframe>

Если вы скопируете данный код и вставите к себе на сайт, то мой блог будет подгружаться на вашем сайте во фрейме размером стандартного баннера, где width – ширина фрейма, равная 468 пикселям, а height – высота фрейма, равная 60 пикселям. В биржах купли-продажи трафика высота и ширина фрейма обычно равна нулю. Тег iframe так же можно дополнить другими переменными, но в данной статье я их рассматривать не буду, так как вышезаданного примера будет достаточно, чтоб определить и понять, что означает тег iframe и как он работает.

Что такое iframe-партнерка?

Iframe-партнерка – это биржа купли-продажи фонового трафика. После несложной регистрации на сайте партнерской программы покупки и продажи iframe-трафика Вам доступен iframe-код, который Вы можете вставить на свой сайт и начать зарабатывать: обычно оплачивается посещение Вашего сайта уникальным посетителем в течении 24 часов по бирже купли-продажи трафика – хосты. Некоторые биржи платят за хиты. Обычно хит оплачивается по цене, заниженной в два раза от стоимости хоста.

Зачем нужен iframe-трафик?

С помощью iframe-трафика зачастую накручивают посещаемость сайта, и, соответственно, показатели счетчиков будут высокими, но, чтоб системы статистики не заподозрили вас в накрутке и поисковые системы не наложили на ваш сайт фильтры, данный вид трафика нужно использовать аккуратно – в размере не более 5% от общего количества трафика, если у вас СДЛ. Так же стоит знать, что в партнерские программы покупки и продажи фонового трафика могут добавлять сайты, на которых присутствует вредоносный код или редирект. Зачастую администрация данных бирж модерирует сайты, но вредоносный код владельцы этих сайтов могут добавить впоследствии – это один из самых доступных и недорогих способов массово распространять вирусы. Администрация некоторых бирж не принимает рекламодателей и покупает трафик только на проверенные ресурсы: в пример можно привести биржу купли-продажи фонового трафика goldentraff. Так же на некоторых биржах, таких, например, как Safeframe или Web-rom, стоит система контроля трафика на наличие вирусов. Ссылки на статьи об этих биржах трафика можно найти в конце этой статьи.

Как заработать с помощью iframe-трафика?

Заработок на биржах купли-продажи трафика часто определяют как деньги из воздуха. Почему так? Все достаточно просто! Вы создали сайт (зачастую – ГС), добавили на него код от одной или нескольких бирж и гоните на него трафик. Трафик можно брать из систем серфинга, автосерфинга и систем обмена визитами – это самый доступный и дешевый источник трафика. Так же можно использовать другие источники трафика: баннерная реклама, тизверная реклама, контекстная реклама и т.п. Еще популярным источником трафика для iframe-партнерок является трафик из систем активной рекламы (САР). Еще раз напомню: коды с бирж купли-продажи iframe-трафика можно ставить вместе на один сайт. Таким образом вы увеличите конверт и, соответственно, заработаете больше, чем потратите на покупку трафика.

С уважением, Сергей Грицюк.

Что такое iFrame?

Объяснить, что такое iFrame лучше всего на реальном примере. Вот вам маленький примерчик:

Текст, который вы видите внутри данного окна, находится по этому адресу http://poleshuk.ru/files/iframe.html.

Как вы, возможно, уже поняли, iframe — это технология, которая позволяет в определенном окне страницы отображать содержимое другой страницы. iframe, как правило, используется, когда вы встраиваете видео с YouTube на страницы своего сайта. Таким образом, на одной странице мы можем отображать сразу несколько страниц, в том числе, и с других сайтов.

Как создать такой iFrame? Делается это достаточно просто с помощью всего одной строчки:

1

<iframe src="http://poleshuk.ru/files/iframe.html" scrolling="auto" frameborder="1"></iframe>

Ключевой тег здесь — это парный тег <iframe></iframe>. Он имеет несколько атрибутов:

width — ширина окна
height — высота окна
scrolling — полоса прокрутки. Может принимать несколько параметров: auto — появляется автоматически при необходимости, no — не появляется, yes — появляется всегда
frameborder — отображение границы окна: 1 — отображать, 0 — нет

Ранее iFrame поддерживали не все браузеры, но сегодня можно уже не бояться, что iframe не будет отображаться в каком-то из браузеров.

Другие посты

HTML-фреймов

HTML iframe используется для отображения веб-страницы на веб-странице.

Синтаксис HTML Iframe

Тег HTML

Попробуй сам »

Или вы можете добавить атрибут стиля и использовать CSS высота и ширина недвижимость:

Пример

Попробуй сам »

Iframe — удалить границу

По умолчанию iframe имеет рамку вокруг себя.

Чтобы удалить границу, добавьте атрибут style и используйте CSS граница недвижимость:

Пример

Попробуй сам »

С помощью CSS вы также можете изменить размер, стиль и цвет границы iframe:

Пример

Попробуй сам »

Iframe — цель для ссылки

В качестве целевого фрейма для ссылки можно использовать iframe.

Атрибут цели ссылки должны относиться к name атрибут iframe:

Пример

W3Schools.com

Попробуй сам »

Краткое содержание главы

  • Тег HTML


    Отправить ответ »

    Начало упражнения

    HTML-тег iframe

    Тег Описание

    Попробуй сам »

    Дополнительные примеры «Попробуйте сами» ниже.

    Определение и использование

    Тег

    Попробуй сам »

    Связанные страницы

    Учебное пособие по HTML: HTML-фреймы

    Ссылка на HTML DOM: объект IFrame

    Настройки CSS по умолчанию

    Большинство браузеров отображают элемент

    WordPress удаляет теги iframe html из соображений безопасности. Шорткод
    Iframe является заменой тега iframe html и принимает те же параметры, что и тег iframe html.
    Вы можете использовать шорткод iframe для встраивания контента с YouTube, Vimeo, Google Maps или с любой внешней страницы.

    Если вам нужно встроить контент из YouTube, Vimeo, SlideShare, SoundCloud, Twitter по прямой ссылке, вы можете использовать http://www.youtube.com/watch?v=oDlbBy9vfgI [/ embed] shortcode. Шорткод
    — это основная функция WordPress, позволяющая вставлять контент из многих ресурсов по прямой ссылке.

    Важно : нельзя встраивать страницы HTTP в страницы HTTPS и наоборот.
    Таким образом, протокол (http или httpS) для родительской и встроенной страниц должен совпадать.

    параметры iframe:
    • src — источник iframe: [iframe src = "http://www.youtube.com/embed/oDlbBy9vfgI"] ; по умолчанию src = ”http://www.youtube.com/embed/oDlbBy9vfgI”;
    • width — ширина в пикселях или процентах: [iframe] или [iframe] ; по умолчанию width = «100%»;
    • высота — высота в пикселях: [iframe] ; по умолчанию высота = ”500 ″;
    • прокрутка — с полосой прокрутки и без: [iframe scrolling = "no"] ; по умолчанию scrolling = «да»;
    • frameborder — с рамкой или без нее: [iframe frameborder = "0"] ; по умолчанию frameborder = ”0 ″;
    • marginheight — высота поля: [iframe marginheight = "0"] ; удалено по умолчанию;
    • marginwidth — ширина поля: [iframe marginwidth = "0"] ; удалено по умолчанию;
    • allowtransparency — позволяет установить прозрачность iframe: [iframe allowtransparency = "true"] ; удалено по умолчанию;
    • id — позволяет добавить id iframe: [iframe] ; удалено по умолчанию;
    • class — позволяет добавить класс iframe: [iframe] ; по умолчанию class = ”iframe-class”;
    • style — позволяет добавить CSS-стили iframe: [iframe] ; удалено по умолчанию;
    • same_height_as — позволяет установить высоту iframe как у целевого элемента: [iframe same_height_as = "div.боковая панель "] , [iframe same_height_as =" div # content "] , [iframe same_height_as =" body "] , [iframe same_height_as =" html "] ; по умолчанию удалено;
    • any_other_param — позволяет добавить новый параметр iframe [iframe any_other_param = "any_value"] ;
    • any_other_empty_param — позволяет добавить новый пустой параметр iframe (например, allowfullscreen на youtube) [iframe any_other_empty_param = ""] ;
    • [iframe] короткий код
    1. установите и активируйте плагин на странице плагинов
    2. добавить шорткод [iframe src = "http: // www.youtube.com/embed/oDlbBy9vfgI "] для перехода на страницу или публикации

    «iframe» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

    авторов
    4,5
    4,4
    4,3
    4,2
    4,1
    • удалил параметры onpageshow и onclick. Причина: уязвимость XSS (спасибо dxw.com).
    4,0
    • удален параметр get_params_from_url. Причина: уязвимость XSS (спасибо dxw.ком).
      Если вам все еще нужна эта функция, вы можете [загрузить iframe версии 3.0 [(https://wordpress.org/plugins/iframe/developers/) и придерживаться ее, но помните об уязвимости XSS.
    • удален параметр загрузки. Причина: уязвимость XSS (спасибо dxw.com).
    • экранирование атрибутов
    3,0
    • удалил функции same_height_as = «content», same_height_as = «window», same_height_as = «document», поскольку они не работали должным образом.
    • переписал javascript-код с использованием чистого JavaScript и без jQuery — не нужно загружать jQuery для каждого сайта с помощью плагина iframe
    • удалена проверка function_exists, потому что каждая функция имеет уникальный префикс
    • код отредактирован
    • обновить документы
    • устанавливает высоту = 500 ″ вместо 480 по умолчанию.
    • установить прокрутку = «да» вместо «нет» по умолчанию
    2.9
    • удалите символ «&» в конце строки в параметре «get_params_from_url»
    2,8
    • удалить исправление для карт Google
    2,7
    2,6
    2,5
    • добавил «get_params_from_url» (спасибо Натанаэлю Майоросу)
    2,4
    2,3
    • мелкие исправления
    • добавлено (src = ”http://www.youtube.com/embed/4qsGTXLnmKs”) по умолчанию
    2,2
    • исправлена ​​ошибка (Примечание: неопределенный индекс: same_height_as)
    2.1
    • добавлен (frameborder = ”0 ″) по умолчанию
    2,0
      Ребилд ядра плагина
    • (спасибо Греггу Таваресу)
    • удалить неустановленные параметры, кроме значений по умолчанию
    • добавлена ​​поддержка всех параметров, которые пользователь установит
    • добавлена ​​поддержка пустых параметров (например, allowfullscreen на youtube).
    1,8
    1,7
    1.6.0
    • Добавлена ​​функция автоматического увеличения высоты (спасибо Willem Veelenturf)
    1.5,0
    • Использование собственного jQuery из каталога include
    • Улучшен параметр «same_height_as»
    1.4.0
    • Добавлен параметр same_height_as
    1.3.0
    • Добавлены параметры «id» и «class»
    1.2.0
    • Добавлено исправление «output = embed» в Google Map
    1.1.0
    • Добавлен параметр allowtransparency (спасибо Кенту)
    1.0.0
    ,

    No related posts.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *