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

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

Какова фактическая разница между iframe, embed и object?

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

ОТВЕТЫ

Ответ 1

<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> если бы не старые браузеры или flash (с которыми я не работаю).

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

Ответ 2

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

Ответ 3

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

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

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