Главная страница   /   15.2. Вставка другого HTML документа (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

15.2. Вставка другого 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 таким образом, как будто он возник из того же источника, что и остальная часть документа