iframes ถูกพิจารณาว่าเป็น 'การปฏิบัติที่ไม่เหมาะสม' หรือไม่? [ปิด]


287

ที่ไหนสักแห่งตามแนวที่ฉันรับความคิดที่ใช้ iframes คือ 'การปฏิบัติที่ไม่ดี'

มันเป็นเรื่องจริงเหรอ? ข้อดี / ข้อเสียของการใช้งานคืออะไร?

คำตอบ:


217

เช่นเดียวกับเทคโนโลยีทั้งหมดมันมีอัพและดาวน์ หากคุณใช้ iframe เพื่อไปยังไซต์ที่ได้รับการพัฒนาอย่างเหมาะสมแน่นอนว่ามันเป็นการฝึกฝนที่ไม่ดี อย่างไรก็ตามบางครั้งก็ยอมรับ iframe

หนึ่งในปัญหาหลักของ iframe เกี่ยวข้องกับบุ๊กมาร์กและการนำทาง หากคุณกำลังใช้งานเพื่อฝังหน้าเว็บไว้ในเนื้อหาของคุณฉันคิดว่าไม่เป็นไร นั่นคือสิ่งที่ iframe มีไว้สำหรับ

อย่างไรก็ตามฉันเคยเห็น iframes ใช้ในทางที่ผิดเช่นกัน ไม่ควรใช้เป็นส่วนหนึ่งของเว็บไซต์ของคุณ แต่เป็นเนื้อหาภายในไซต์

โดยปกติหากคุณสามารถทำได้โดยไม่มี iframe นั่นเป็นตัวเลือกที่ดีกว่า ฉันแน่ใจว่าคนอื่น ๆ ที่นี่อาจมีข้อมูลเพิ่มเติมหรือตัวอย่างที่เฉพาะเจาะจงมากขึ้นปัญหาทั้งหมดที่คุณพยายามแก้ไข

ด้วยที่กล่าวว่าถ้าคุณถูก จำกัด HTML และไม่สามารถเข้าถึงแบ็กเอนด์เช่น PHP หรือ ASP.NET ฯลฯ บางครั้ง iframe เป็นตัวเลือกเดียวของคุณ


23
"ถ้าคุณถูก จำกัด ที่ HTML และไม่สามารถเข้าถึงแบ็กเอนด์เช่น PHP หรือ ASP.NET ฯลฯ บางครั้ง iframe เป็นตัวเลือกเดียวของคุณ" ... นั่นไม่จริง คุณสามารถฝังเนื้อหาภายนอกในหน้าของคุณโดยรับข้อมูลผ่าน jquery ajax จากนั้นเติม div ด้วยข้อมูลนั้น
developer747

54
@ developer747 - ว่าจะไม่ทำงานถ้าเนื้อหาภายนอกอยู่ในสถานที่อื่นเนื่องจากนโยบายกำเนิดเดียวกัน ในกรณีปิดบังบางไซต์ระยะไกลอาจสนับสนุนJSONP ; แต่อาจจะไม่
Peter V. Mørch

2
ฉันรู้สึกว่า iframes มีประโยชน์น้อยกว่าเฟรมเซตเดิมเนื่องจาก iframe ไม่สามารถปรับขนาดได้โดยผู้ใช้ - แต่ฉันจะไม่ใช้ frameset สำหรับสิ่งใดนอกจากคู่มือเนื่องจากไม่มีอยู่ใน html5 อีกต่อไป ตัวอย่าง: คู่มือผู้สร้างเกม
Domino

15
ควรกล่าวถึงว่า iframes เป็นวิธีเดียวในการกำหนดขอบเขต CSS ที่ซ้อนกัน พวกเขาแยกมาร์กอัป, เลย์เอาต์, สไตล์และ Javascript * จากเอกสารด้านนอกซึ่งมีประโยชน์ในกรณีการใช้งานและแอปพลิเคชันจำนวนมาก * Javascript ไม่ถูกแยกออกหากเอกสารด้านในใช้แหล่งกำเนิดร่วมกับส่วนนอก ในทางตรงกันข้ามเอกสารจากต้นกำเนิดที่แตกต่างกันยังคงสามารถสื่อสารได้โดยใช้window.postMessage()ตัวอย่างเช่นการใช้การปรับขนาดความร่วมมืออัตโนมัติ iframe
Tobia

1
iFrame is Evil! อาจช่วยได้เช่นกัน
DanielV

75

พวกเขาไม่ใช่การฝึกฝนที่ไม่ดีพวกเขาเป็นเพียงเครื่องมืออีกอย่างหนึ่งและเพิ่มความยืดหยุ่น

สำหรับใช้เป็นองค์ประกอบหน้ามาตรฐาน ... ดีเพราะเป็นวิธีที่ง่ายและเชื่อถือได้ในการแยกเนื้อหาออกเป็นหลายหน้า โดยเฉพาะอย่างยิ่งสำหรับเนื้อหาที่ผู้ใช้สร้างขึ้นอาจเป็นประโยชน์กับหน้าภายใน "แซนด์บ็อกซ์" ในiframeมาร์กอัปที่ไม่ดีดังนั้นจะไม่มีผลกับหน้าหลัก ข้อเสียคือถ้าคุณแนะนำการเลื่อนหลายเลเยอร์ (หนึ่งสำหรับเบราว์เซอร์หนึ่งสำหรับiframe) ผู้ใช้ของคุณจะได้รับความผิดหวัง เช่น adzm กล่าวว่าคุณไม่ต้องการใช้iframeสำหรับการนำทางหลัก แต่คิดว่าเป็นข้อความ / มาร์กอัปเทียบเท่ากับวิธีที่วิดีโอหรือไฟล์สื่ออื่นจะถูกฝัง

สำหรับเหตุการณ์พื้นหลังสคริปต์โดยทั่วไปแล้วตัวเลือกจะอยู่ระหว่างการซ่อนiframeและXmlHttpRequestการโหลดเนื้อหาสำหรับหน้าปัจจุบัน ความแตกต่างคือการiframeสร้างหน้าโหลดดังนั้นคุณสามารถย้ายไปข้างหน้าและข้างหน้าในแคชเบราว์เซอร์กับเบราว์เซอร์ส่วนใหญ่ โปรดสังเกตว่า Google ซึ่งใช้XmlHttpRequestทั่วสถานที่นั้นยังใช้iframes ในบางกรณีเพื่ออนุญาตให้ผู้ใช้เลื่อนไปข้างหน้าและย้อนกลับในประวัติเบราว์เซอร์


11
ฉันคิดว่าเป็นสิ่งสำคัญที่ต้องกล่าวถึง iframes ที่สามารถใช้เพื่อฝังหน้าจากโดเมนไปยังหน้าจากโดเมนอื่น หากหน้าฝังตัวต้องการติดตามผู้ใช้ด้วยคุกกี้และเก็บข้อมูลนั้นไว้จากโดเมนโฮสต์ตัวเลือกเดียวของคุณคือใช้ iframe เนื่องจาก JS อยู่ภายใต้การควบคุมของโดเมนโฮสต์
Nicholas Leonard

@NicholasLeonard ตัวอย่างที่ดีคือคุณสามารถใช้พวกมันเพื่อบังคับให้แคชจาก localstorage หน้าโดยทำให้หน้าดัชนีเป็นสคริปต์ที่ตรวจพบว่าหน้าย่อยนั้นอยู่ใน localstorage จากนั้น document.write จาก localstorage ถ้ามีและถ้าไม่เพิ่มใน iframe ไปยังหน้าย่อยนั้น ในหน้าย่อยนั้นให้สคริปต์เพื่อจัดเก็บ outerhtml ขององค์ประกอบหน้า HTML ลงใน localstorage เหตุผลที่ดีจริงๆที่ใช้วิธีนี้คือช่วยให้คุณเพิ่มในหน้าจอการโหลด

ฉันไม่เห็นด้วยแต่ฉันไม่สามารถลงคะแนนได้เพราะเป็น POV สำคัญ
victorf

28

มันเป็น 'การปฏิบัติที่ไม่ดี' ที่จะใช้พวกเขาโดยไม่เข้าใจข้อเสียของพวกเขา โพสต์ของ Adzm สรุปพวกเขาเป็นอย่างดี

ใน flipside gmail ใช้ iFrames อย่างหนักในพื้นหลังสำหรับคุณสมบัติที่ยอดเยี่ยมบางอย่าง (เช่นการอัปโหลดไฟล์อัตโนมัติ) หากคุณทราบถึงข้อ จำกัด ของ iFrames ฉันไม่เชื่อว่าคุณควรรู้สึกถึงการใช้งานใด ๆ


18

เมื่อได้ทำงานกับพวกเขาในหลาย ๆ สถานการณ์ฉันคิดว่า iframe นั้นเป็นโปรแกรมเว็บที่เทียบเท่ากับคำสั่ง goto นั่นคือสิ่งที่ต้องหลีกเลี่ยงโดยทั่วไป ภายในเว็บไซต์พวกเขาอาจมีประโยชน์บ้าง อย่างไรก็ตามข้ามไซต์พวกเขามักจะเป็นความคิดที่ดีสำหรับทุกสิ่งยกเว้นเนื้อหาที่ง่ายที่สุด

พิจารณาความเป็นไปได้ ... หากใช้สำหรับเนื้อหาที่กำหนดพารามิเตอร์พวกเขาได้สร้างอินเทอร์เฟซ และในไซต์ระดับมืออาชีพอินเทอร์เฟซนั้นต้องใช้ SLA และการจัดการเวอร์ชันซึ่งเกือบจะไม่สนใจในการออนไลน์

หากใช้สำหรับเนื้อหาที่ใช้งาน - เฟรมที่สคริปต์โฮสต์ - ดังนั้นจะมีข้อ จำกัด สคริปต์ข้ามโดเมน (ต่างกัน) บางคนสามารถถูกแฮ็ก แต่ไม่ค่อยสม่ำเสมอ และหากเนื้อหาที่มีกรอบของคุณจำเป็นต้องมีการโต้ตอบกันมันจะต้องพยายามที่จะทำนอกเหนือจากเฟรม

หากใช้กับเนื้อหาที่ได้รับอนุญาตเว็บไซต์ที่เข้าร่วมจะต้องรับภาระจากความต้องการย้ายข้อมูลการให้สิทธิ์นอกแบนด์ระหว่างโฮสต์

ดังนั้นแม้ว่าจะมีประโยชน์เป็นครั้งคราวภายในเว็บไซต์ แต่ก็ไม่เหมาะสำหรับการผสม คุณดีกว่าที่จะดูพอร์ทัลจริงและพอร์ตเล็ต ที่แย่กว่านั้นคือพวกเขาเป็นที่รักของทุก ๆ คนในเว็บมือสมัครเล่น - ผู้จัดการด้านเทคโนโลยีจำนวนมากได้แอบอ้างพวกเขาว่าเป็นวิธีแก้ปัญหาต่าง ๆ ในความเป็นจริงพวกเขาสร้างมากขึ้น


10

จากประสบการณ์ของฉันด้านบวกสำหรับ iframe คือเมื่อเรียกรหัสบุคคลที่สามซึ่งอาจเกี่ยวข้องกับการเรียกใช้จาวาสคริปต์ที่เรียกว่า a มีDocument.write();คำสั่ง ดังที่คุณอาจทราบคำสั่งเหล่านี้ไม่สามารถเรียกใช้แบบอะซิงโครนัสเนื่องจากวิธีการแยกวิเคราะห์ (DOM Parser ฯลฯ ) ตัวอย่างของสิ่งนี้คือhttp://sourceforge.net/projects/phpadsnew/ฉันใช้ iframes เพื่อช่วยให้เว็บไซต์ของเราเร็วขึ้นเนื่องจากมีการเรียก phpadsnews หลายครั้งและไซต์กำลังรอการตอบกลับก่อนที่จะดำเนินการแตกต่างกัน ส่วนต่างๆของหน้า ด้วย iframe ฉันสามารถอนุญาตให้ไซต์แสดงส่วนอื่น ๆ ของหน้าและยังคงเรียกDocument.write()คำสั่งของ phpads แบบอะซิงโครนัส การป้องกันและการล็อค js


8

มีประโยชน์สำหรับคน iframes แน่นอน คุณจะวางวิดเจ็ตเครือข่ายสภาพอากาศลงบนหน้าของคุณได้อย่างไร วิธีเดียวที่จะคว้า XML ของพวกเขาและแยกมัน แต่แน่นอนคุณต้องมีเงื่อนไขในการโยนกราฟิกสภาพอากาศที่เลวร้าย ... ไม่คุ้มกับมันมากนัก แต่ก็สะอาดกว่านี้ถ้าคุณมีเวลา


6

โมเดลเฟรมเซตดั้งเดิม (เฟรมเซตและองค์ประกอบเฟรม) นั้นแย่มากจากมุมมองการใช้งาน IFrame ทำการประดิษฐ์ในภายหลังซึ่งไม่ได้มีปัญหามากเท่ากับรุ่นเฟรมเซตดั้งเดิม แต่มีข้อเสียเปรียบ

หากคุณอนุญาตให้ผู้ใช้นำทางภายใน IFrame ลิงก์และบุ๊กมาร์กจะไม่ทำงานตามที่คาดไว้ (เพราะคุณทำบุ๊กมาร์ก URL ของหน้าเว็บด้านนอก แต่ไม่ใช่ URL ของ iframe)


1
ต้องไม่เห็นด้วย ... ความคิดเห็นแบบนี้ไม่มีคุณสมบัติเลย
Dawesi

5

เมื่อหน้าหลักของคุณโหลดในโปรโตคอล HTTP และบางส่วนของหน้าของคุณจำเป็นต้องทำงานในโปรโตคอล HTTPS, iFrame สามารถเอาชนะ jsonp ได้

โดยเฉพาะอย่างยิ่งถ้า dataType ของคุณไม่ได้เป็น json และจำเป็นต้องแปลบนเซิร์ฟเวอร์เป็น json และแปลบนไคลเอนต์กลับมาเป็นเช่น html ที่ซับซ้อน

ดังนั้นไม่ - iFrame ไม่ใช่ความชั่วร้าย


5

พวกเขาไม่ได้เลวร้าย แต่มีประโยชน์จริง ๆ ฉันมีปัญหาใหญ่เมื่อไม่นานมานี้ที่ฉันต้องฝังฟีด Twitter ของฉันและมันจะไม่ปล่อยให้ md ทำมันในหน้าเดียวกันดังนั้นฉันจึงวางมันบนหน้าอื่นและวางไว้ใน iframe

มันก็ดีเช่นกันเพราะเบราว์เซอร์ทั้งหมด (และเบราว์เซอร์โทรศัพท์) รองรับ พวกเขาไม่สามารถพิจารณาการปฏิบัติที่ไม่ดีตราบใดที่คุณใช้พวกเขาอย่างถูกต้อง


4

เป็นที่น่าสังเกตว่า iframe จะไม่คำนึงถึงความเร็วของการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้หรือเนื้อหาของ iframe ของคุณทำให้มีขนาดเล็ก (0.3s หรือมากกว่านั้น) แต่ความเร็วในการดาวน์โหลดหน้าเว็บของคุณช้าลงอย่างเห็นได้ชัด นี่ไม่ใช่สิ่งที่คุณจะเห็นเมื่อทำการทดสอบในเครื่อง ที่จริงแล้วสิ่งนี้เป็นจริงสำหรับองค์ประกอบใด ๆ ที่เพิ่มไปยังหน้า แต่ iframes ดูเหมือนจะแย่ลง


1
ทำไม? และเป็นวิธีที่ทำให้ iframes โหลดได้หรือไม่เมื่อหน้าหลักเสร็จสิ้นการโหลด?
นิโคลัสลีโอนาร์

3
ฉันจำไม่ได้ว่าทำไมพวกเขาถึงช้ามาก ฉันกำลังค้นคว้าเรื่องนี้เมื่อปีที่แล้ว อาจเป็นเพราะเบราว์เซอร์กำลังสร้างบริบทการแสดงผลใหม่ทั้งหมดสำหรับแต่ละ iframe สำหรับการทำให้ไฟล์ไม่โหลดจนกว่าการโหลดหน้าจะเสร็จสมบูรณ์คุณสามารถใช้ iframe ที่ว่างเปล่าจากนั้นตั้งค่าแท็ก src ของ iframe หลังจากการโหลดหน้าเว็บเสร็จสมบูรณ์ อย่างไรก็ตามโปรดทราบว่าแม้ iframe ที่ว่างเปล่าจะทำให้การแสดงผลหน้าเว็บของคุณช้าลงแม้ว่าจะไม่ใช่การดาวน์โหลดดังนั้นสิ่งต่างๆจะยังคงช้าลงสำหรับผู้ใช้ของคุณ
Brian

3
ในทางตรงกันข้ามเราอาจพิจารณาพูดถึง CDN (เครือข่ายการจัดส่งเนื้อหา) เมื่ออ้างอิงความเร็วและ iFrames พิจารณาว่า iFrame สามารถดาวน์โหลดทรัพยากรในแบบคู่ขนานดังนั้นจึงเพิ่มความเร็ว (ขึ้นอยู่กับเบราว์เซอร์) นี่คือการอ้างอิงอื่นอย่างน้อยหนึ่งที่เห็นด้วยกับตำแหน่งของฉัน developer.yahoo.com/performance/rules.html
Strixy

2
@Strixy: URL ที่คุณระบุระบุว่า IFrames มีค่าใช้จ่ายสูงถึงแม้จะว่างเปล่า แนะนำให้ลดการใช้ IFrames ให้น้อยที่สุด การใช้ CDN เพื่อเพิ่มความเร็วไซต์ของคุณนั้นเป็นมุมมองในการใช้ IFrames CDN อาจช่วยลดต้นทุนในการใช้ IFrame อย่างไรก็ตาม CDN ที่ไม่มี IFrame นั้นดีกว่า CDN และ IFrame
Brian

1
@Strixy: หากคุณต้องการดาวน์โหลดทรัพยากรแบบขนานมีวิธีที่ดีกว่าที่จะทำ ความเก่าแก่คือการโหลดทุกสิ่งผ่านทางจาวาสคริปต์ Hotness ใหม่คือการใช้พนักงานบริการซึ่งช่วยให้คุณสามารถจัดการวิธีที่ตัวแทนผู้ใช้โหลดโหลดล่วงหน้าและแคชทรัพยากรไซต์โดยใช้ตรรกะฝั่งไคลเอ็นต์ hotness ใหม่อื่น ๆ คือ http / 2 push ซึ่งช่วยให้คุณสามารถส่งทรัพยากรไปยังเบราว์เซอร์โดยไม่ต้องรอให้เบราว์เซอร์ร้องขอ อย่างไรก็ตามเนื่องจากแคช http / 2 ถูกตรวจสอบหลังจากแคชของเบราว์เซอร์อื่น ๆ จึงเป็นตัวเลือกที่ไม่ดีสำหรับวัตถุประสงค์นี้
Brian

3

ฉันเห็นว่า IFRAME ใช้อย่างประสบความสำเร็จเป็นวิธีที่ง่ายในการสร้างเมนูบริบทแบบไดนามิก แต่ผู้ชมเป้าหมายของเว็บแอปนั้นเป็นผู้ใช้ Internet Explorer เท่านั้น

ฉันจะบอกว่าทุกอย่างขึ้นอยู่กับความต้องการของคุณ หากคุณต้องการให้หน้าเว็บของคุณทำงานได้ดีเท่าเทียมกันในทุกเบราว์เซอร์ให้หลีกเลี่ยง IFRAME หากคุณกำหนดเป้าหมายไปยังกลุ่มเป้าหมายที่แคบและเป็นที่รู้จัก (เช่นในอินทราเน็ตท้องถิ่น) และคุณเห็นประโยชน์ในการใช้ IFRAME แล้วฉันจะบอกว่าตกลง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.