ความแตกต่างระหว่างองค์ประกอบ iframe, ฝังและวัตถุ

180

HTML5 กำหนดองค์ประกอบเนื้อหาที่ฝังตัวหลายอย่างซึ่งจากมุมมองแบบตานกดูเหมือนว่าจะคล้ายกันมากกับจุดที่เหมือนกันมาก

เป็นความแตกต่างที่เกิดขึ้นจริงระหว่างสิ่งที่iframe, embedและobject?

หากฉันต้องการฝังไฟล์ HTML จากเว็บไซต์บุคคลที่สามองค์ประกอบใดบ้างที่ฉันสามารถใช้ได้และพวกเขาจะแตกต่างกันอย่างไร

html iframe

พวกเขาดูไม่เหมือนกันเลย เว็บไซต์บุคคลที่สามจะเป็น iframe

— ไก่ชิง

ฝังชุดย่อย vs object: stackoverflow.com/questions/1244788/embed-vs-object , ชุดย่อยiframe vs object: stackoverflow.com/questions/924946/… , ฝัง vs object vs video: stackoverflow.com/questions/11199048/ …

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

@KaiQing ไม่ว่าพวกเขาจะมีลักษณะเหมือนหรือไม่เป็นความคิดเห็นของคุณเห็นได้ชัดว่าไม่เปิดเผยโดย OP โอ้และโดยวิธีการมันไม่ได้เป็นคำตอบสำหรับคำถามของเขาเช่นกัน

— Malik A. Rumi

@ Malik - นั่นเป็นเหตุผลที่มันเป็นความคิดเห็น และไม่การมองที่เหมือนกันไม่ใช่ความคิดของฉันเนื่องจากคำจำกัดความของแต่ละคนแสดงความแตกต่างอย่างชัดเจนและเมื่อคุณจะใช้แต่ละคน ลักษณะที่ปรากฏในส่วนหน้าของทฤษฎีอาจมีลักษณะที่เหมือนกัน แต่ฉันคิดว่าบริบทของ OP นั้นมีการใช้งานและไม่ปรากฏ ความคิดเห็นเป็นการแสดงให้เห็นว่าคุณจะใช้ iframe สำหรับบุคคลที่สามตามที่พวกเขาถาม ฉันเดาได้แค่ว่าฉันยุ่งเกินกว่าจะเขียนคำตอบแบบเต็มแล้ว

— ไก่ชิง

ตอนนี้ MDN มีคำอธิบายโดยละเอียดdeveloper.mozilla.org/en-US/docs/Learn/HTML/?hl=th

— ohkts11

คำตอบ:

122

`<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>ที่คุณจะต้องมีการตั้งค่าบางกลไกอื่น ๆ แทนเช่นจาวาสคริปต์ postMessage API

— Jonas Schubert Erlandsson
แหล่งที่มา

embedเหมาะอย่างยิ่งสำหรับให้ผู้เยี่ยมชมติดตามการเปลี่ยนเส้นทางที่มาจากเว็บไซต์ที่บล็อกเฟรม (เราใช้เพื่อเริ่มต้นการเข้าสู่ระบบภายนอก)

— Riking

ไม่จริงเกี่ยวกับ "วัตถุจะไม่ยอมให้ใช้สคริปต์" schepers.cc/svg/blendups/embedding.html

— Dzenly

@Dzenly สคริปต์ที่ประกาศตัวอย่างและ SVG ที่รวมอยู่ในทาง<object>จะทำงาน แต่เป็นไปไม่ได้ (หรือฉันไม่ได้จัดการ) เพื่อให้เข้ากับบริบทของวัตถุจากหน้าหลัก ดังนั้นสคริปต์ "ภายใน" จะทำงานสคริปต์ "ภายนอก" จากมุมมองของวัตถุไม่สามารถสื่อสารกับบริบทวัตถุ

— Jonas Schubert Erlandsson

— Bachsau

@Bachsau เนื่องจากนี่คือการสนทนาเกี่ยวกับตัวเลือกที่แตกต่างกันและการแลกเปลี่ยนของพวกเขามันรู้สึกผิดที่จะบอกว่า<iframe />เป็นทางไป จุดทั้งหมดของโพสต์นั้นแตกต่างกันทั้งหมด <embed>ยังคงอยู่ในข้อมูลจำเพาะ: w3.org/TR/html5/embedded-content-0.html#the-embed-elementดังนั้นการกล่าวถึงเป็นธรรม ฉันยังพบว่ามันมากกว่าเล็กน้อยตลกที่คุณยืนยันว่า<embed>ล้าสมัยและกล่าวถึงจาวาในประโยคต่อไป :)

— โจนัสชูเบิร์ต Erlandsson

เหตุผลหนึ่งที่ต้องใช้objectมากกว่าiframeคือวัตถุนั้นปรับขนาดเนื้อหาที่ฝังใหม่เพื่อให้พอดีกับขนาดวัตถุ ซาฟารีที่โดดเด่นที่สุดใน iPhone 4s ที่ความกว้างของหน้าจอ320pxและ html จาก URL แบบฝังอาจตั้งค่าขนาดที่ใหญ่กว่า

— ivanixdev
แหล่งที่มา

คุณสามารถให้รายละเอียดเพิ่มเติมและ / หรือการอ้างอิงได้ไหม? มิฉะนั้นจะถือว่าเป็นความคิดเห็นเท่านั้นไม่ใช่เป็นคำตอบ

— cnst

ใช่ แต่มันเป็นความคิดเห็นที่เป็นประโยชน์

— Malik A. Rumi

นี่เป็นกรณีการใช้งานของฉันความคิดเห็นที่เป็นประโยชน์ที่ดีอย่างแน่นอนขอบคุณ

— Sid

iFrame + iPhone = iHeadache

— djvg

เหตุผลที่จะใช้อีกobjectกว่า iframe คือobjectทรัพยากรย่อย (เมื่อมีการ<object>ดำเนินHTTPการร้องขอ) จะถือว่าเป็นpassive/displayในแง่ของซึ่งหมายความว่ามันเป็นความปลอดภัยมากขึ้นเมื่อคุณต้องมีMixed contentMixed content

หมายถึงเนื้อหาผสมว่าเมื่อคุณมีแต่ทรัพยากรของคุณจากhttpshttp

การอ้างอิง: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

— harunurhan
แหล่งที่มา

ดูเหมือนจะไม่เป็นไปตามการอ่านปัจจุบันของบทความที่เชื่อมโยงซึ่งแสดงวัตถุภายใต้หัวเรื่องทั้งแบบแอ็คทีฟและแบบพาสซีฟ Passive: "subresources (เมื่อ <object> ดำเนินการตามคำขอ HTTP)" / ใช้งานอยู่: "<object> (data attribute)" (หลังคือวิธีที่คุณโหลดคำขอ HTTP อื่นตามคำถามเดิม

— Tim Abell