HTML5 визначає кілька вбудованих елементів вмісту, які, з точки зору пташиного польоту, схожі на те, що вони значною мірою однакові.

Яка реальна різниця між iframe, embedі object?

Якщо я хочу вставити HTML-файл із стороннього веб-сайту, який із цих елементів я можу використовувати та як вони відрізнятимуться?

<iframe>

Елемент iframe представляє вкладений контекст перегляду. Стандарт HTML 5 - " <iframe>Елемент"

В основному використовується для включення ресурсів з інших доменів або субдоменів, але може також використовуватися для включення вмісту з того самого домену. В <iframe>«сила сек є те , що вбудований код" живий "і може обмінюватися даними з батьківським документом.

<embed>

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

Елемент вбудовування забезпечує точку інтеграції для зовнішнього (як правило, не 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>де ви повинні створити якийсь - то інший механізм , а НЕ , наприклад, в API JavaScript PostMessage .

Одна з причин використовувати 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