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

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

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

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

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

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

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

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