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

180

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

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

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

html iframe

— CNST
источник

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

— Кай Цин

Внедрить против подмножества объектов: stackoverflow.com/questions/1244788/embed-vs-object , iframe против подмножества объектов: stackoverflow.com/questions/924946/… , Внедрить против объекта против видео: stackoverflow.com/questions/11199048/…

— Сиро Сантилли 郝海东冠状病六四事件法轮功

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

— Малик А. Руми

@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 .

— Йонас Шуберт Эрландссон
источник

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

— запуска

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

— Dzenly

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

— Йонас Шуберт Эрландссон

— Бахсау

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

— Jonas Schubert Erlandsson

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

— ivanixdev
источник

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

— CNST

да, но это полезный комментарий

— Малик А. Руми

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

— Сид

iFrame + iPhone = iHeadache

— DJVG

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

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

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

— harunurhan
источник

Похоже, что это не тот случай, основанный на текущем прочтении связанной статьи, в которой объекты перечислены как под активными, так и за пассивными заголовками. Пассивный: «подресурсы (когда <объект> выполняет HTTP-запросы)» / Active: «<объект> (атрибут данных)» (последний - это способ загрузки другого HTTP-запроса в соответствии с исходным вопросом.

— Тим Абелл