Вопрос:
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
Ответ №4
У MDN есть хорошая статья на эту тему:
Я не уверен, существовал ли он, когда этот вопрос был впервые задан.
