Набор авторов в комманду!!!




Пожертвовать на развитие сайта. Пожертвовать

Элемент iframe в html 5

Главная » Справочники » Справочник HTML5 » Элемент iframe в html 5
Элемент iframe в HTML5 задает контейнер для отображения другого HTML-документа.
i
Элемент iframe в html5 на сайте RaMech.net iframe

Отображение элемента iframe HTML 5

Правильное отображение элемента iframe, в Chrome Отображение элемента iframe в вашем браузере
Правильное отображение элемента iframe, в Chrome

Описание элемента iframe в HTML5

Элемент iframe создаёт на странице область (фрейм), которая может содержать любую другую страницу.

Отличие элемента iframe HTML4.1 от HTML5

Элемент iframe больше не поддерживает следующие атрибуты: frameborder, marginheight, marginwidth, scrolling.

Также появились новые, такие как: sandbox, seamless, srcdoc.

Атрибуты элемента iframe в HTML5

Атрибут iframe Описание атрибута элемента iframe
frameborder

Атрибут frameborder для элемента iframe не используется.

Рекомендуется использовать стиль CSS border.

height

Устанавливает высоту для элемента iframe.

marginheight

Атрибут marginheight для элемента iframe не используется.

Рекомендуется использовать стиль CSS padding.

marginwidth

Атрибут marginwidth для элемента iframe не используется.

Рекомендуется использовать стиль CSS padding.

name

Устанавливает имя для элемента iframe.

sandbox

Устанавливает ограничения для содержимого элемента iframe. Может принимать следующие значения:

allow-forms - разрешает документу во фрейме отправлять данные форм.

allow-same-origin - рассматривает содержимое как с того же сервера.

allow-scripts - разрешает выполнение скриптов, кроме всплывающих окон.

allow-top-navigation - разрешает открытие ссылок в родительской странице.
scrolling

Атрибут scrolling для элемента iframe не используется.

Рекомендуется использовать стиль CSS overflow.

seamless

Включает содержимое фрейма в родительский документ.

src

Значением атрибута src является адрес документа, который будет загружен в элемент iframe.

srcdoc

Значением атрибута srcdoc является код html, который будет отображён в элементе html, при этом значение атрибута src игнорируется.

Пример HTML-кода элемента col 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>srcdoc</title>
	</head>
	<body>
		<iframe srcdoc="<html><body><p>Это содержимое атрибута <em><strong>srcdoc</strong></em></p></body></html>"
			src="/public/html5/iframe-srcdoc.html"></iframe>
	</body>
</html>
Правильное отображение элемента iframe Отображение элемента iframe в вашем браузере
Правильное отображение элемента iframe
width

Устанавливает ширину для элемента iframe.

Примеры использования элемента iframe в HTML5

Пример определения элемента iframe

Пример HTML-кода элемента iframe 
<!DOCTYPE html>
<html>
	<head>
		<title>Создание фрейма</title>
	</head>
	<body>
		<iframe style="border:none;" src="/public/html5/iframe-page2.html" height="200px" width="300px"></iframe>
	</body>
</html>
Правильное отображение элемента iframe, в Chrome Отображение элемента iframe в вашем браузере
Правильное отображение элемента iframe, в Chrome

Идеи оригинального использования элемента iframe в HTML5

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

Пример HTML-кода элемента iframe 
<!DOCTYPE html>
<html>
  <head>
    <title>Возможности iframe</title>
    <style>
      body{
        margin: 0;
        padding: 10px;
        height: 194px;
        width: 510px;
        background-color: #ccc;
      }
      
      .box{
        width: 476px;
        height: 126px;
        padding: 10px;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <iframe class="box" name="box" src="/public/html5/iframe-use1-cat.html"></iframe>
    <p><a target="box" href="/public/html5/iframe-use1-cat.html" >Кошки</a> | <a target="box" href="/public/html5/iframe-use1-dog.html" >Собаки</a> 
    -- Вы можете загружать страницы во фрейм.</p>
  </body>
</html>
i