HTML5 definiuje kilka osadzonych elementów treści, które z lotu ptaka wydają się być bardzo podobne do tego, że są w dużej mierze identyczne.

Jaka jest różnica między rzeczywistą iframe, embeda object?

Jeśli chcę osadzić plik HTML z witryny innej firmy, których z tych elementów mogę użyć i czym się one różnią?

<iframe>

Element iframe reprezentuje zagnieżdżony kontekst przeglądania. Standard HTML 5 - „ <iframe>Element”

Służy głównie do dołączania zasobów z innych domen lub subdomen, ale może być również używany do dołączania treści z tej samej domeny. Jego <iframe>zaletą jest to, że osadzony kod jest aktywny i może komunikować się z dokumentem nadrzędnym.

<embed>

Znormalizowany w HTML 5, wcześniej był to niestandardowy tag, który wprawdzie został zaimplementowany przez wszystkie główne przeglądarki. Zachowanie przed HTML 5 może się różnić ...

Element embed zapewnia punkt integracji dla zewnętrznej (zwykle innej niż HTML) aplikacji lub zawartości interaktywnej. ( Standard HTML 5 - „ <embed>Element” )

Służy do osadzania treści dla wtyczek do przeglądarek. Wyjątkiem są pliki SVG i HTML, które są obsługiwane inaczej w zależności od standardu.

Szczegóły dotyczące tego, co można, a czego nie można zrobić z zawartością osadzoną, zależą od danej wtyczki przeglądarki. Ale w przypadku SVG możesz uzyskać dostęp do osadzonego dokumentu SVG od rodzica za pomocą czegoś takiego:

svg = document.getElementById("parent_id").getSVGDocument();

Z wnętrza osadzonego dokumentu SVG lub HTML możesz dotrzeć do rodzica za pomocą:

parent = window.parent.document;

W przypadku osadzonego HTML nie ma możliwości uzyskania osadzonego dokumentu od rodzica (który znalazłem).

<object>

<object>Element może stanowić źródło zewnętrzne, które w zależności od rodzaju źródła, albo będzie traktowany jako obraz, a zagnieżdżonym kontekście przeglądania, lub jako źródła zewnętrznego przetwarzane przez wtyczkę. ( Standard HTML 5 - „ <object>Element” )

Wniosek

Chyba że osadzasz SVG lub coś statycznego, którego prawdopodobnie najlepiej użyjesz <iframe>. Aby uwzględnić użycie SVG <embed>(jeśli dobrze pamiętam <object>, nie pozwolę ci skryptu †). Szczerze mówiąc, nie wiem, dlaczego miałbyś używać, <object>chyba że dla starszych przeglądarek lub flasha (z którymi nie pracuję).

† Jak wskazano w komentarzach poniżej; skrypty w programie <object>będą działać, ale konteksty nadrzędny i podrzędny nie mogą komunikować się bezpośrednio. Dzięki temu <embed>możesz uzyskać kontekst dziecka od rodzica i odwrotnie. Oznacza to, że możesz używać skryptów w rodzicu do manipulowania dzieckiem itp. Ta część nie jest możliwa z <object>lub w <iframe>przypadku której musiałbyś zamiast tego skonfigurować inny mechanizm, taki jak JavaScript postMessage API .

Jednym z powodów używania objectover iframejest to, że obiekt zmienia rozmiar osadzonej zawartości, aby dopasować ją do wymiarów obiektu. najbardziej widoczne w Safari w iPhonie 4s, gdzie szerokość ekranu to, 320pxa kod HTML z osadzonego adresu URL może ustawiać większe wymiary.

Innym powodem używania objectover iframe jest to, że objectzasoby podrzędne (gdy <object>wykonuje HTTPżądania) są traktowane jako passive/displayw kategoriach Mixed content, co oznacza, że ​​jest bezpieczniejsze, gdy trzeba Mixed content.

Zawartość mieszana oznacza, że ​​jeśli masz, httpsale Twój zasób pochodzi z http.

Źródła: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content