Вставка другого HTML документа

Элемент iframe позволяет вставить другой HTML документ в существующий. В таблице 15-7 представлен этот элемент.

Таблица 15-7: Элемент iframe

Элемент	`iframe`
Тип элемента	Фразовый
Разрешенные родительские элементы	Любой элемент, который может содержать фразовые элементы
Локальные атрибуты	`src`, `srcdoc`, `name`, `width`, `height`, `sandbox`, `seamless`
Содержание	Символьные данные
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	В HTML5 появились атрибуты `sandbox` и `seamless`. Устарели атрибуты `longdesc`, `align`, `allowtransparency`, `frameborder`, `marginheight`, `marginwidth` и `scrolling`.
Соглашение по стилям	`iframe { border: 2px inset; }`

В листинге 15-5 показано, как может быть использован элемент iframe.

Листинг 15-5: Использование элемента iframe

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<header>
		<h1>Things I like</h1>
		<nav>
			<ul>
				<li>
					<a href="fruits.html" target="frame">Fruits I Like</a>
				</li>
				<li>
					<a href="activities.html" target="frame">Activities I Like</a>
				</li>
			</ul>
		</nav>
	</header>
	<iframe name="myframe" width="300" height="100"></iframe>
</body>
</html>

В этом примере я создал iframe со значением атрибута name равном frame. Таким образом, я создал браузерный контент с именем myframe. Затем я могу использовать этот браузерный контент с атрибутом target других элементов, в частности: form, button, input и base. Я использую элемент a для создания пары гиперссылок, которые, если им следовать, будут загружать адреса, указанные в их атрибутах href, в iframe. Вы можете увидеть, как это работает, на рисунке 15-5.

Рисунок 15-5: Использование iframe для вставки внешних HTML документов

Атрибуты width и height указывают размер в пикселях. Атрибут src указывает URL, который должен быть загружен и отображен первоначально в iframe, а атрибут srcdoc позволяет определить HTML документ, который будет отображаться внутри.

HTML5 вводит два новых атрибута для элемента iframe. Первый, seamless, говорит браузеру, что он должен отображать содержимое iframe так, как если бы оно было неотъемлемой частью основного HTML документа. По рисунку вы видите, что рамка применяется по умолчанию, а также присутствует полоса прокрутки, если содержание превышает размер, указанный атрибутами width и height.

Второй атрибут, sandbox, применяет ограничения к HTML документу. Если атрибут применяется без значения, например:

... 
<iframe sandbox name="myframe" width="300" height="100"> 
</iframe>   
...

будет отключено следующее:

скрипты
формы
плагины
ссылки, нацеленные на другой браузерный контент

Кроме того, считается, что контент в iframe возник из другого источника, чем остальная часть HTML документа, что вводит дополнительные меры безопасности. Вы можете включить отдельные функции, определяя значения атрибута sandbox, например, так:

... 
<iframe sandbox="allow-forms" name="myframe" width="300" height="100"> 
</iframe>   
...

Набор значений, которые можно использовать, описаны в таблице 15-8. К сожалению, когда я писал эту книгу, ни один из основных браузеров не поддерживал атрибуты sandbox и seamless, поэтому я не смог показать их на примерах.

Таблица 15-8: Значения для iframe атрибута sandbox

Значение	Описание
`allow-forms`	Включает формы
`allow-scripts`	Включает скрипты
`allow-top-navigation`	Позволяет ссылки, которые нацелены на браузерный контент высокого уровня, который разрешает, чтобы весь документ был заменен другим или чтобы была создана новая вкладка или окно
`allow-same-origin`	Разрешает обрабатывать контент `iframe` таким образом, как будто он возник из того же источника, что и остальная часть документа

15.3. Вставка контента при помощи плагинов

или RSS канал: