разница между элементами iframe, embed и object


180

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

Какова реальная разница между iframe, embedи object?

Если я хочу встроить HTML-файл со стороннего сайта, какой из этих элементов я могу использовать и чем они будут отличаться?


на самом деле они не выглядят одинаково. сторонний сайт будет iframe.
Кай Цин

Внедрить против подмножества объектов: stackoverflow.com/questions/1244788/embed-vs-object , iframe против подмножества объектов: stackoverflow.com/questions/924946/… , Внедрить против объекта против видео: stackoverflow.com/questions/11199048/…
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功

2
@KaiQing Независимо от того, по вашему мнению, выглядят они одинаково или нет, ОП Да, и, кстати, это тоже не ответ на его вопрос.
Малик А. Руми

1
@Malik - вот почему это комментарий. И нет, выглядеть одинаково - это не мое мнение, поскольку определения каждого четко обозначают различия и когда вы будете использовать каждое из них. То, как они выглядят на внешнем интерфейсе, теоретически может выглядеть идентично, но я думаю, что контекст OP был в использовании, а не во внешнем виде. Комментарий должен проиллюстрировать, что вы будете использовать iframe для третьих лиц, как они и просили. Я могу только предположить, что был слишком занят, чтобы написать полный ответ тогда.
Кай Цин

Теперь MDN имеет подробное объяснение developer.mozilla.org/en-US/docs/Learn/HTML/...
ohkts11

Ответы:


122

<iframe>

Элемент iframe представляет собой вложенный контекст просмотра. Стандарт HTML 5 - « <iframe>Элемент»

В основном используется для включения ресурсов из других доменов или поддоменов, но может также использоваться для включения содержимого из того же домена. В <iframe>«сила сек является то , что встроенный код„живой“и может обмениваться данными с родительским документом.

<embed>

Стандартизированный в HTML 5, до этого это был нестандартный тег, который, по общему признанию, был реализован всеми основными браузерами. Поведение до HTML 5 может варьироваться ...

Элемент embed обеспечивает точку интеграции для внешнего (обычно не HTML) приложения или интерактивного контента. ( Стандарт HTML 5 - « <embed>Элемент» )

Используется для встраивания контента для плагинов браузера. Исключением является SVG и HTML, которые обрабатываются по-разному в соответствии со стандартом.

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

svg = document.getElementById("parent_id").getSVGDocument();

Изнутри встроенного документа SVG или HTML вы можете связаться с родителем с помощью:

parent = window.parent.document;

Для встроенного HTML нет способа получить вложенный документ от родителя (который я нашел).

<object>

<object>Элемент может представлять собой внешний ресурс, который, в зависимости от типа ресурса, либо будет рассматриваться как изображение, как вложенный контекст просмотра, или как внешний ресурс должен быть обработан плагин. ( Стандарт HTML 5 - « <object>Элемент» )

Вывод

Если вы не встраиваете SVG или что-то статичное, вы, вероятно, лучше всего используете <iframe>. Чтобы включить SVG использовать <embed>(если я правильно помню <object>, не позволит вам сценарий †). Честно говоря, я не знаю, почему вы бы использовали, <object>если не для старых браузеров или флэш (с которыми я не работаю).

† Как указано в комментариях ниже; <object>будут выполняться сценарии , но родительский и дочерний контексты не могут взаимодействовать напрямую. С <embed>его помощью можно получить контекст ребенка от родителя и наоборот. Это означает, что вы можете использовать скрипты в родительском элементе для манипулирования дочерним элементом и т. Д. Эта часть невозможна, <object>или <iframe>где вам нужно было бы установить какой-то другой механизм, например, JavaScript PostMessage API .


4
embedидеально, чтобы посетитель следовал цепочке перенаправления, начинающейся на веб-сайте, который блокирует создание. (Мы используем его для
запуска

3
Не правда насчет "объект не пропустит скрипт". schepers.cc/svg/blendups/embedding.html
Dzenly

@Dzenly Сценарии, объявленные, например, и SVG, включенные через, <object>будут работать, но невозможно (или мне не удалось) получить контекст объекта с родительской страницы. Таким образом, «внутренние» сценарии будут выполняться, «внешние» сценарии с точки зрения объекта не могут взаимодействовать с контекстом объекта.
Йонас Шуберт Эрландссон

<embed> действительно устарел. Я бы не стал больше это использовать. Сегодня каждый крупный браузер может использовать объект для каждого возможного плагина. Если вы хотите использовать flash и определить его тип вместо CLSID, он будет работать в каждом браузере одинаково. Он даже может запускать Java-апплеты. Тем не менее, я бы все еще использовал iframes для встраивания внешних страниц.
Бахсау

2
@Bachsau, так как это обсуждение различных вариантов и их компромиссов, просто неправильно говорить, <iframe />что это путь. Весь смысл поста в том, что они все разные. <embed>все еще в спецификации: w3.org/TR/html5/embedded-content-0.html#the-embed-element , поэтому упоминание этого оправдано. Я также нахожу более чем забавным то, что вы утверждаете, что <embed>устарели, и упоминаете апплеты Java в следующем предложении :)
Jonas Schubert Erlandsson

28

Одна из причин , чтобы использовать objectболее iframe, что объект повторно размеры встроенного содержимого , чтобы соответствовать размерам объекта. наиболее заметно в сафари в iPhone 4s, где ширина экрана 320pxи HTML-код из встроенного URL-адреса могут увеличить размеры.


9
Можете ли вы дать более подробную информацию и / или ссылки? В противном случае это квалифицируется только как комментарий, а не как ответ.
CNST

9
да, но это полезный комментарий
Малик А. Руми

1
Это был мой вариант использования, безусловно, хороший полезный комментарий. Спасибо.
Сид

8
iFrame + iPhone = iHeadache
DJVG

4

Другая причина использования objectнад iframe заключается в том, что objectподресурсы (когда запросы <object>выполняются HTTP) рассматриваются как passive/displayс точки зрения Mixed content, что означает, что они более безопасны, когда это необходимо Mixed content.

Смешанный контент означает, что когда у вас есть, httpsно ваш ресурс из http.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content


Похоже, что это не тот случай, основанный на текущем прочтении связанной статьи, в которой объекты перечислены как под активными, так и за пассивными заголовками. Пассивный: «подресурсы (когда <объект> выполняет HTTP-запросы)» / Active: «<объект> (атрибут данных)» (последний - это способ загрузки другого HTTP-запроса в соответствии с исходным вопросом.
Тим Абелл
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.