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

html iframe

— cnst
źródło

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

— Kai Qing

podzbiór embed vs object: stackoverflow.com/questions/1244788/embed-vs-object , iframe vs object podzestaw: stackoverflow.com/questions/924946/… , embed vs object vs video: stackoverflow.com/questions/11199048/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

@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,

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

— Jonas Schubert Erlandsson
źródło

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

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

— Bachsau

@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

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.

— ivanixdev
źródło

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

tak, ale to pomocny komentarz

— Malik A. Rumi

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

— Sid

iFrame + iPhone = iHeadache

— djvg

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

— harunurhan
źródło

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