для чего нужен тег iframe

clavin · October 14, 2010

Подскажите, пожалуйста, для чего нужен тег iframe. В каких интернет-технологиях или просто ситуациях его надо применять? Ещё интересно, как он поддерживается браузерами и стандартами w3c. К примеру, могу ли я делать сайты на XHTML Transitional и применять этот тег в вёрстке?

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

Great Rash · October 14, 2010

Чтобы применить iframe нужно юзать доктайп frameset.

Используется много где, например для реализации COMET, для реализации WYSIWYG, вроде как для реализации кроссдоменного AJAX.

SelenIT · October 14, 2010

Сорри, но iframe валидируется всё-таки с Transitional-доктайпами (Frameset — это для обычных фреймов, с frameset-ом вместо body). Либо с HTML5.

Используется чаще всего, да, в качестве подпорки или замены аякса (фоновый аплоуд файлов и т.п.). Во времена IE6 еще использовался для перекрытия select-ов всякими раскрывающимися меню (там они непослушные), это актуально везде, где поддержка IE6 еще нужна. Еще вариант — замена всплывающих окон (вместо нового окна — что-то типа lightbox с iframe внутри, а в iframe — то, что должно было быть в попапе). Поддерживается сейчас везде, но недостатки все те же, что у обычных фреймов, поэтому основную функциональность сайта завязывать на него не надо.

clavin · October 14, 2010

Во времена IE6 еще использовался для перекрытия select-ов всякими раскрывающимися меню (там они непослушные)

Хей!.. Эти времена ещё не прошли!

Я замечал, что некоторые меню перекрывались selsect'ами (меню располагается под селектом, независимо какой z-index задавалось меню). Это вы имеете ввиду? Если да, то интересно, как это исправляется с помощью iframe?

psywalker · October 14, 2010

Хей!.. Эти времена ещё не прошли!
Я замечал, что некоторые меню перекрывались selsect'ами (меню располагается под селектом, независимо какой z-index задавалось меню). Это вы имеете ввиду? Если да, то интересно, как это исправляется с помощью iframe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Menu</title>
		<style type="text/css">
			*{margin:0;padding:0;list-style:none;}
			body{min-width:1000px;}
			ul{
				height:47px;
				padding:0 20px;
				background:url(m-bg.jpg) left top repeat-x;
				border:1px solid #6b9b07;
				background:#94c74e;
			}
			ul li:hover .drop,ul li.hover .drop{display:block;width:300px;}
			ul li{
				float:left;
				width:14%;
				position:relative;
				height:45px;
				display:table-cell;
				vertical-align:middle;
				padding:1px 1px;
				top:-1px;
				_behavior:url("csshover.htc")
			}
			ul li a{
				font-size:15px;
				color:#fff;
				background:url(arrow.gif) no-repeat 10px 50%;
				vertical-align:middle;
				display:table-cell;
				height:42px;
				padding-left:30px;
			}
			ul li:hover{
				background:url(m-bg.jpg) repeat-x 0 -48px;
				border:1px solid #b1770b;
				height:45px;
				padding:0px 0px 1px;
			}
			ul .drop{
				display:none;
				position:absolute;
				z-index:1;
				width:305px;
				overflow:hidden;
			}
			ul ul{
				left:0;
				top:49px;
				overflow:hidden;
				background:#94c74e;
				border:1px solid #6fa204;
				border-width:0 1px 1px;
				height:auto;
			}
			ul ul li{float:none;text-align:left;width:300px;padding:0 10px;background:none;display:block;}
			ul ul a{padding:0;padding-left:15px;}
			iframe{
				position:absolute;
				top:0px;
				left:0px;
				z-index:-1;
				width:3000px;
				height:3000px;
				filter:mask();
			}
		</style>
		<!--[if lte IE 7]>
			<style type="text/css">
			ul li{width:13.8%;display:inline;zoom:1;}
			ul li a{zoom:1;position:relative;padding-left:30px;width:70%;display:block;background:url(arrow.gif) no-repeat 10px 50%;}
			ul li a span{position:absolute;top:50%;}
			ul li a span span{position:relative;top:-50%;}
		</style>
		<![endif]-->
</head>
<body>
<div>
	<ul>

		<li><a href="#"><span><span>Детские коляски</span></span></a></li>
		<li><a href="#"><span><span>Детская мебель</span></span></a>
			<div class="drop">
				<ul>
					<li><a href="#">Детские кроватки</a></li>
					<li><a href="#">Детские комнаты</a></li>
					<li><a href="#">Дуэты (кровать+комод)</a></li>

					<li><a href="#">Кроватки-трансформеры</a></li>
					<li><a href="#">Комод-пеленатор(с ванночкой иеленальным столиком)</a></li>
					<li><a href="#">Комоды</a></li>
					<li><a href="#">Шкафы</a></li>
					<li><a href="#">Игровые манежи</a></li>
					<li><a href="#">Манежи-кроватки</a></li>

					<li><a href="#">Пеленальные столики с Ванночкой</a></li>
					<li><a href="#">Люльки</a></li>
					<li><a href="#">Люльки - переноски</a></li>
				</ul>
				<!--[if lt IE 7]><iframe></iframe><![endif]-->
			</div>
		</li>

		<li><a href="#"><span><span>Автокресла</span></span></a></li>
		<li><a href="#"><span><span>Постельные пренадлежности</span></span></a></li>
		<li><a href="#"><span><span>Мамочкам в помощь</span></span></a></li>
		<li><a href="#"><span><span>Детский транспорт</span></span></a></li>
		<li><a href="#"><span><span>Для купания и гигиены</span></span></a></li>
	</ul>

	<form action="#">
		<select class="brand"><option>Выберите производителя</option></select>
		<select class="brand"><option>Выберите производителя</option></select>
		<select class="brand"><option>Выберите производителя</option></select>
		<select class="brand"><option>Выберите производителя</option></select>
	</form>
</div>

</body>
</html>

SelenIT · October 14, 2010

(меню располагается под селектом, независимо какой z-index задавалось меню). Это вы имеете ввиду?

Да, именно это. В IE6 select не слушается z-index-а и перекрывает почти всё, но iframe оказывается "козырнее" и перекрывает его (даже если этот iframe сделать полностью прозрачным или вообще невидимым с помощью фильтров). Поэтому под всплывающие элементы подкладывается (обычно скриптом) пустой iframe такого же размера, позиционируя его в те же координаты, но ниже по z-index'у. Выше psywalker показал вариант, как именно

Veseloff · October 14, 2010

Чтобы применить iframe нужно юзать доктайп frameset.
Используется много где, например для реализации COMET, для реализации WYSIWYG, вроде как для реализации кроссдоменного AJAX.

Да, и еще для вставки «куска» на сайт — кагбэ самое первое назначение ифрейма

s0rr0w · October 15, 2010

Чтобы применить iframe нужно юзать доктайп frameset.
Используется много где, например для реализации COMET, для реализации WYSIWYG, вроде как для реализации кроссдоменного AJAX.

w3c как всегда жжот. iframe есть в Transitional доктайпе, и нет в Strict 4.01. Но, Транзишинал был переходным с 3.2 на 4.0, а теперь его вернут, скорее всего, в Strict HTML5...

Где логика, непонятно.

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

Vlad · October 15, 2010

Эээ, забудь уже про логику W3C, постичь ее нереально.

s0rr0w · October 15, 2010

Эээ, забудь уже про логику W3C, постичь ее нереально.

Она очень специфическая. Ребята играются в "напиши спецификацию", забывая про проблемы реального мира.

SelenIT · October 15, 2010

Где логика, непонятно.

Логика была. Хотели заменить кучу разностей (iframe, embed, applet... а в перспективе XHTML 2 — и img) универсальным object с единообразным интерфейсом и поддержкой вложенных объектов (для изячной деградации). С точки зрения спецификаторов это казалось крутым. На практике оказалось удобнее пользоваться проверенными специализированными вещами, их стабильно поддерживали браузеры, поэтому их продолжали клепать вебмастера, поэтому именно их, а не новомодную альтернативу, продолжали поддерживать браузеры — в общем, вышло как всегда). А ребята из WHATWG окончательно закрепили это положение дел в своих WebApplications 1.0 (руководствуясь принципом "pave the cow-paths"), который спустя несколько лет W3C, скрепя сердце зубами, вынужден был признать перспективным стандартом (а свои прежние планы — утопическим тупиком). Правда, потом до этого черновика дорвался т-щ Hyatt из Эпла, которому явно не дают покоя лавры Микрософта 13-летней давности...

Edited October 15, 2010 by SelenIT

Sign In

для чего нужен тег iframe

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information