iframe, gömme ve nesne öğeleri arasındaki fark

180

HTML5, kuşbakışı açıdan büyük ölçüde özdeş olma noktasına çok benzeyen birkaç gömülü içerik öğesi tanımlar.

Ne arasındaki gerçek fark iframe, embedve object?

Üçüncü taraf bir siteden bir HTML dosyası yerleştirmek istersem, bu öğelerden hangisini kullanabilirim ve bunlar nasıl farklılık gösterirdi?

html iframe

— cnst
kaynak

gerçekten aynı görünmüyorlar. üçüncü taraf sitesi bir iframe olacaktır.

— Kai Qing

nesne altkümesine vs yerleştirme: stackoverflow.com/questions/1244788/embed-vs-object , iframe vs nesne altkümesi: stackoverflow.com/questions/924946/… , nesneye vs video yerleştirme: stackoverflow.com/questions/11199048/…

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

@KaiQing Aynı görünüp görünmedikleri sizin fikrinizdir, açıkça OP tarafından paylaşılmaz. Oh, ve bu arada, bu onun sorusuna da bir cevap değil.

— Malik

@Malik - bu yüzden bir yorum. Ve hayır, özdeş görünmek benim görüşüm değil, çünkü her birinin tanımları farklılıkları ve her birini ne zaman kullanacağınızı açıkça gösteriyor. Ön uçta nasıl göründükleri teorik olarak aynı görünebilir, ancak OP'nin bağlamının görünüşte değil kullanımda olduğunu düşünüyorum. Yorum, üçüncü taraflar için istedikleri gibi bir iframe kullanacağınızı göstermektir. Sadece o zaman tam bir cevap yazmak için çok meşgul olduğumu varsayabilirim.

— Kai Qing

Şimdi MDN detaylı açıklama vardır developer.mozilla.org/en-US/docs/Learn/HTML/...

— ohkts11

Yanıtlar:

122

`<iframe>`

İframe öğesi, iç içe bir gözatma bağlamını temsil eder. HTML 5 standardı - " <iframe>Öğe"

Öncelikle diğer alanlardan veya alt alan adlarından kaynak eklemek için kullanılır, ancak aynı alan adından içerik eklemek için de kullanılabilir. <iframe>'Canlı ve ebeveyn belgesi ile iletişim kurabilir bireyin gücü gömülü kod olmasıdır.'

`<embed>`

HTML 5'te standartlaştırılmış, bundan önce tüm büyük tarayıcılar tarafından uygulanan standart olmayan bir etiketti. HTML 5'ten önceki davranışlar değişebilir ...

Gömme öğesi harici (genellikle HTML olmayan) bir uygulama veya etkileşimli içerik için bir entegrasyon noktası sağlar. ( HTML 5 standardı - " <embed>Öğe" )

Tarayıcı eklentileri için içerik gömmek için kullanılır. Bunun istisnası, standarda göre farklı şekilde ele alınan SVG ve HTML'dir.

Katıştırılmış içerikle neler yapılabileceğini ve yapılamayacağını gösteren ayrıntılar, söz konusu tarayıcı eklentisine bağlıdır. Ancak SVG için, gömülü SVG belgesine üst öğeden aşağıdaki gibi bir şeyle erişebilirsiniz:

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

Gömülü bir SVG veya HTML belgesinin içinden üst öğeye aşağıdakilerle ulaşabilirsiniz:

parent = window.parent.document;

Gömülü HTML için, gömülü belgeyi üst öğeden (bulduğum) almanın bir yolu yoktur.

`<object>`

<object>Öğe bir iç tarayıcı içerik olarak, öz kaynak tipine bağlı olarak, ya da bir resim olarak kabul edilecektir, harici bir kaynak da temsil edebilir, veya bir dış kaynak olarak bir eklenti tarafından işlenecek. ( HTML 5 standardı - " <object>Öğe" )

Sonuç

SVG veya statik bir şey gömmediyseniz, muhtemelen en iyi şekilde kullanırsınız <iframe>. SVG kullanımını dahil etmek için <embed>(doğru hatırlamıyorsam <object>senaryo vermenize izin vermez †). Dürüst olmak gerekirse ben <object>eski tarayıcılar veya flash (ben ile çalışmıyor) sürece neden kullanacağınızı bilmiyorum .

† Aşağıdaki yorumlarda belirtildiği gibi; içindeki komut dosyaları <object>çalıştırılır, ancak üst ve alt bağlamlar doğrudan iletişim kuramaz. İle <embed>çocuğun bağlamını ebeveyninden alabilir veya tersini yapabilirsiniz. Bu, alt öğeyi manipüle etmek için üst öğedeki komut dosyalarını kullanabileceğiniz anlamına gelir. Bu bölüm, JavaScript postMessage API'sı gibi başka bir mekanizma ile mümkün değildir <object>veya <iframe>nereye yerleştirmeniz gerektiği anlamına gelir .

— Jonas Schubert Erlandsson
kaynak

embedziyaretçinin çerçevelemeyi engelleyen bir web sitesinden gelen bir yönlendirme zincirini takip etmesini sağlamak için idealdir. (

— girişleri başlatmak için kullanıyoruz

"Nesne komut dosyasına izin vermez" hakkında doğru değil. schepers.cc/svg/blendups/embedding.html

— Dzenly

@Dzenly Örneğin, ve SVG'nin içerdiği bildirilen komut dosyaları <object>çalışır, ancak üst sayfadan nesnenin bağlamına ulaşmak mümkün değildir (veya yönetemedim). Böylece "iç" komut dosyaları çalışır, "dış" komut dosyaları, nesnenin bakış açısından, nesnelerin bağlamıyla iletişim kuramaz.

— Jonas Schubert Erlandsson

— Bachsau

@Bachsau, bu, farklı seçenekler ve bunların ödünç alma yöntemleri hakkında bir tartışma <iframe />olduğu için boş olarak söylemenin yanlış olduğunu söylüyor . Gönderinin asıl amacı, hepsinin farklı olması. <embed>hala spesifikasyonda: w3.org/TR/html5/embedded-content-0.html#the-embed-element , bu yüzden bahsetmek haklı. Ayrıca <embed>, modası geçmiş olduğunu ve bir sonraki cümlede Java uygulamalarından bahsettiğinizi biraz daha komik buluyorum :)

— Jonas Schubert Erlandsson

Kullanmak için bir nedeni, objectüzerinde iframenesne nesne boyutlarına uyacak şekilde gömülü içeriği yeniden boyutları olmasıdır. En çok ekran genişliğinin bulunduğu iPhone 4s'deki safari ile dikkat çeken 320pxve gömülü URL'deki html boyutları daha büyük ayarlayabilir.

— ivanixdev
kaynak

Daha fazla ayrıntı ve / veya referans verebilir misiniz? Aksi takdirde, bu sadece bir yorum olarak nitelendirilir, bir cevap olarak nitelendirilmez.

— cnst

evet, ama yararlı bir yorum

— Malik A. Rumi

Bu benim kullanım durumum, kesinlikle iyi bir yorum. Teşekkürler.

— Sid

iFrame + iPhone = iHeadache

— djvg

Kullanımına bir diğer nedeni objectiframe üzerinde olmasıdır object(bir zaman alt kaynaklar <object>gerçekleştirdiği HTTPistekleri) olarak kabul edilmektedir passive/displayaçısından Mixed content, bu olmalıdır zaman güvenli fazlası var vasıtası Mixed content.

Karışık içerik https, kaynağınız geldiğinde ancak kaynağınız olduğu anlamına gelir http.

Referans: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

— harunurhan
kaynak

Nesneyi hem aktif hem de pasif başlıklar altında listeleyen bağlı makalenin şu anki okumasına dayanan durum böyle görünmüyor. Pasif: "alt kaynaklar (bir <object> HTTP isteği gerçekleştirdiğinde)" / Aktif: "<object> (veri özelliği)" (sonuncusu, orijinal soruya göre başka bir HTTP isteğini nasıl yüklediğinizdir.

— Tim Abell