różnica między elementami iframe, embed i object


180

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ą?


tak naprawdę wcale nie wyglądają identycznie. witryna strony trzeciej byłaby ramką iframe.
Kai Qing


2
@KaiQing To, czy wyglądają identycznie, czy nie, to Twoja opinia, oczywiście nie podzielana przez OP. Aha, i tak przy okazji, to też nie jest odpowiedź na jego pytanie.
Malik A. Rumi,

1
@Malik - dlatego to komentarz. I nie, wygląd identyczny nie jest moim zdaniem, ponieważ definicje każdego z nich jasno określają różnice i kiedy należy ich użyć. To, jak wyglądają z przodu, mogłoby teoretycznie wyglądać identycznie, ale myślę, że kontekst OP był używany, a nie wygląd. Komentarz ma zilustrować, że użyjesz elementu iframe dla strony trzeciej, o co poprosili. Mogę tylko przypuszczać, że byłem wtedy zbyt zajęty, aby napisać pełną odpowiedź.
Kai Qing

Teraz MDN ma szczegółowe wyjaśnienie developer.mozilla.org/en-US/docs/Learn/HTML/ ...
ohkts11

Odpowiedzi:


122

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


4
embedjest idealny, aby skłonić odwiedzającego do śledzenia łańcucha przekierowań pochodzącego ze strony internetowej, która blokuje ramkowanie. (Używamy go do rozpoczęcia logowania federacyjnego.)
Riking

3
Nieprawda o "obiekt nie pozwoli skryptowi". schepers.cc/svg/blendups/embedding.html
Dzenly

@Dzenly Zostaną uruchomione skrypty zadeklarowane w, na przykład, i SVG dołączone przez <object>, ale nie jest możliwe (lub nie udało mi się) uzyskać kontekstu obiektu ze strony nadrzędnej. Zatem skrypty „wewnętrzne” będą działać, skrypty „zewnętrzne” z punktu widzenia obiektu nie mogą komunikować się z kontekstem obiektu.
Jonas Schubert Erlandsson

<embed> jest naprawdę przestarzały. Nie użyłbym go już do niczego. Obecnie każda większa przeglądarka jest w stanie używać obiektu dla każdej możliwej wtyczki. Jeśli chcesz użyć Flasha i zdefiniować jego typ zamiast CLSID, będzie on działał w każdej przeglądarce w ten sam sposób. Może nawet uruchamiać aplety java. Jednak nadal używałbym ramek iframe do osadzania stron zewnętrznych.
Bachsau

2
@Bachsau, ponieważ jest to dyskusja na temat różnych opcji i ich kompromisów, niewłaściwe wydaje się po prostu puste stwierdzenie, że <iframe />jest to najlepszy sposób. Cały post polega na tym, że wszystkie są różne. <embed>jest nadal w specyfikacji: w3.org/TR/html5/embedded-content-0.html#the-embed-element , więc wspomnienie o tym jest uzasadnione. Ja również znaleźć więcej niż trochę śmieszne, że twierdzą, że <embed>jest przestarzała i wspomnieć apletów Java w następnym zdaniu :)
Jonas Schubert Erlandsson

28

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.


9
Czy możesz podać więcej szczegółów i / lub referencje? W przeciwnym razie kwalifikuje się to tylko jako komentarz, a nie jako odpowiedź.
cnst

9
tak, ale to pomocny komentarz
Malik A. Rumi

1
To był mój przypadek użycia, zdecydowanie dobry pomocny komentarz. Dzięki.
Sid

8
iFrame + iPhone = iHeadache
djvg

4

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


Wydaje się, że tak nie jest na podstawie aktualnego czytania powiązanego artykułu, który wymienia obiekt zarówno pod nagłówkami aktywnymi, jak i pasywnymi. Pasywne: „podźródła (gdy <obiekt> wykonuje żądania HTTP)” / Aktywne: „<object> (atrybut danych)” (ten drugi sposób ładowania kolejnego żądania HTTP zgodnie z oryginalnym pytaniem.
Tim Abell
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.