แท็ก iframe สามารถสร้างเฟรมที่ฝังตัวในหน้าเว็บซึ่งเรียกเนื้อหาของเอกสารหน้าเว็บอื่นโดยระบุแอตทริบิวต์ SRC เช่นเดียวกับ Frameset มันถูกใช้เพื่อแยกโครงสร้างหน้าเว็บเพื่อให้บางส่วนของหน้าเว็บสาธารณะ แต่เมื่อเทียบกับโครงสร้างเฟรมเวิร์กของเฟรมเซ็ตแยกทั้งเว็บเพจทั้งหมด iframes มีความยืดหยุ่นมากขึ้นและสามารถฝังได้ทุกที่บนหน้าเว็บ เนื่องจากคุณลักษณะของการใช้งาน IFRAME นี้จึงถูกนำมาใช้อย่างกว้างขวางในบางหน้าซึ่งนำไปสู่การละเมิดที่ไม่เหมาะสม การออกแบบเว็บจะวิเคราะห์วิธีการทั่วไปหลายประการในการใช้องค์ประกอบเว็บ iframe
- การสร้างส่วนประกอบหน้าการตอบสนองที่ปราศจากการรีเฟรชเป็นโซลูชันสำหรับการแลกเปลี่ยนข้อมูลแบบอะซิงโครนัส นี่เป็นวิธีทางเลือกในการส่งคำขอแบบอะซิงโครนัสโดยไม่ต้องใช้ AJAX ในวันแรก ๆ โดยการตั้งค่าองค์ประกอบ iframe ที่มองไม่เห็นบนหน้าและชี้แอตทริบิวต์ SRC ไปยังที่อยู่หน้าเว็บที่จำเป็นต้องส่งคำขอสามารถส่งคำขอได้ ในโดเมนเดียวกันหน้าส่งคืนสามารถแยกวิเคราะห์ได้เพื่อรับข้อมูล ข้อดีอีกประการหนึ่งคือมันข้ามรูปแบบความปลอดภัยของ Sandbox ของ AJAX และสามารถส่งคำขอข้ามโดเมนเพื่อรับข้อมูลได้สำเร็จ แต่ในกรณีนี้วัตถุเอกสารของ IFRAME ไม่สามารถเรียกคืนได้ เนื่องจากลักษณะของมันยังคงมีผลบังคับใช้ในบางหน้าเว็บที่ต้องการคำขอข้ามโดเมน การรีเฟรชแบบนี้หมายความว่าหน้าหลักจะไม่รีเฟรชในระหว่างกระบวนการแลกเปลี่ยนข้อมูลและยังคงตอบสนองต่อการดำเนินการของผู้ใช้ การแลกเปลี่ยนข้อมูลจริงถูกล็อคโดยหน้า iframe ที่ฝังอยู่ในหน้าหลัก หน้า iframe ที่ฝังอยู่นี้สามารถตั้งค่าให้มองเห็นหรือมองไม่เห็นตามต้องการและจะไม่ส่งผลกระทบต่อการตอบสนองขององค์ประกอบอื่น ๆ ในหน้าหลักของผู้ใช้ เอฟเฟกต์นี้คล้ายกับการรีเฟรชของ AJAX แต่จะเห็นได้ว่ากลไกของมันแตกต่างอย่างสิ้นเชิง แม้ว่า Gmail จะเป็นแบบจำลองสำหรับแอปพลิเคชัน AJAX แต่ก็รวม IFRames จำนวนมากเข้าด้วยกันเพื่อให้ได้ประสิทธิภาพและประสบการณ์การใช้งานที่เหนือกว่า
- วิธีที่จะเพิ่มประสิทธิภาพหน้าเว็บ ใช้ iframes เพื่อโหลดสคริปต์แบบขนานเพื่อแก้ปัญหาการโหลดของเนื้อหาของบุคคลที่สามที่โหลดช้าเช่นไอคอนและโฆษณา แพลตฟอร์มโฆษณาของ Google Adsense หมายถึงการใช้ IFRAME เพื่อแบ่งปันรายได้บนเว็บไซต์ของผู้ใช้ นอกจากนี้คุณยังสามารถดูเทคโนโลยีประเภทนี้ได้โดยการดูและวิเคราะห์รหัสโฆษณาในหน้าแรกของพอร์ทัลในประเทศ นอกจากนี้คุณยังสามารถใช้ iframe ที่ซ่อนอยู่เพื่อโหลดไฟล์ขนาดใหญ่กว่าล่วงหน้าเพื่อแคชเมื่อเครือข่ายอยู่ภายใต้แรงดันเครือข่ายต่ำเพื่อให้หน้าอื่น ๆ สามารถใช้งานได้ แนวคิดของการโหลดล่วงหน้าสามารถวิเคราะห์ได้โดยใช้ firebug สำหรับหน้าแรกของ Google คุณสามารถเห็นได้ในแท็กร่างกาย:
onload = document.fqfocus (); ถ้า (document.images) ภาพใหม่ (). src = '/images/nav_logo4.png'
ด้วยรหัสดังกล่าวภาพ NAV_LOGO4.PNG ที่โหลดได้ไม่ได้ใช้ในหน้าแรก แต่เมื่อใช้ภาพนี้ในหน้าอื่น ๆ เช่นรายการผลการค้นหาคุณต้องอ่านจากแคชและไม่จำเป็นต้องดาวน์โหลดอีกครั้ง
- เป็นวิธีการแฮ็คสำหรับเลเยอร์ลอยตัวในเบราว์เซอร์ IE6 เพื่อบล็อกการเลือกการควบคุมและองค์ประกอบแฟลช ในยุค Web2.0 ERA เทคโนโลยี Lightbox (หรือ Thickbox) ได้กลายเป็นเอฟเฟกต์ยอดนิยมด้วยประสบการณ์ที่ดีและประสบการณ์การมองเห็นที่สดใหม่ เทคโนโลยีนี้ใช้เลเยอร์ลอยตัวที่วางตำแหน่งอย่างแน่นอนเพื่อครอบคลุมหน้าต้นฉบับเพื่อนำเสนอข้อมูลข้อความรูปภาพรูปแบบหรือองค์ประกอบหน้าอื่น ๆ โดยพลการแทนที่วิธีในการพัฒนาเว็บก่อนหน้านี้ Windows เบราว์เซอร์ป๊อปอัพหรือข้อความของเบราว์เซอร์และการควบคุมอินพุตมักใช้เพื่อโต้ตอบกับผู้ใช้ ในรูปแบบเก่าสคริปต์ที่ปรากฏขึ้นหน้าต่างใหม่มักถูกดักจับโดยระบบบล็อกโฆษณาของเบราว์เซอร์และการควบคุมข้อความของเบราว์เซอร์จะถูกวิพากษ์วิจารณ์จากนักวิจัยประสบการณ์ผู้ใช้เพราะพวกเขาขัดจังหวะกระบวนการของเบราว์เซอร์ ในฐานะนักพัฒนาแนวหน้าเว็บแนวหน้าที่มีข้อกำหนดที่เข้มงวดเกี่ยวกับตัวคุณเองคุณจะพบปัญหานี้ในกระบวนการใช้เอฟเฟกต์ Lightbox เลเยอร์การวางตำแหน่งสัมบูรณ์ไม่สามารถครอบคลุมตัวควบคุมที่เลือกและแฟลชบนหน้าเว็บใน IE6 และแม้ว่าสไตล์จะถูกตั้งค่าเป็นค่าดัชนี Z ที่สูงขึ้น แต่ก็จะไร้ประโยชน์ นี่เป็นเพราะองค์ประกอบที่เลือกเป็นองค์ประกอบระดับฟอร์มใน IE6 และลำดับความสำคัญของมันสูงกว่าแท็ก HTML อื่น ๆ ทั้งหมด เฉพาะ iframes ของระดับฟอร์มเดียวกันเท่านั้นที่สามารถครอบคลุมได้ ดังนั้นนักพัฒนาจึงพบว่าการวางเลเยอร์ลอยตัวลงใน iframe หรือวาง iframe ในเลเยอร์ลอยตัวสามารถแก้ปัญหานี้ได้ โชคดีที่ปัญหานี้ได้รับการแก้ไขในเวอร์ชันอัพเกรด IE หลังจาก IE6 แต่สำหรับ IE6 ซึ่งยังคงมีส่วนแบ่งการตลาด 50%+ (สถิติ ณ เวลาที่ตีพิมพ์) โซลูชันนี้ยังคงมีความสำคัญในทางปฏิบัติ
นอกเหนือจากแอพพลิเคชั่นทั้งสามข้างต้นแล้วแอปพลิเคชันที่ไม่เหมาะสมบางอย่างก็เป็นเรื่องธรรมดาสำหรับองค์ประกอบ IFRAME ตัวอย่างเช่นการฝังเฟรม iframe มากเกินไปในหน้าและอัปเดต iframe เมื่อคลิกโดยระบุแอตทริบิวต์เป้าหมายของแท็กลิงค์นอกเฟรม การใช้งานนี้คล้ายกับ Frameset บรรลุวัตถุประสงค์ในการแบ่งปันการนำทาง ความตั้งใจดั้งเดิมนั้นดี แต่ไม่ต้องสงสัยเลยว่าข้อเสีย สิ่งนี้จะนำไปสู่คำขอมากเกินไปสำหรับหน้าเว็บ บทความ "แนวทางปฏิบัติที่ดีที่สุดสำหรับการเร่งเว็บไซต์ของคุณ" ที่กล่าวถึงข้างต้นระบุไว้อย่างชัดเจนว่าการเพิ่มประสิทธิภาพหน้าเว็บต้องการการลดจำนวน iframes และสรุปข้อเสียสามประการ:
- แม้ว่าเนื้อหาจะว่างเปล่า แต่ก็จะทำให้ทรัพยากรสูญหาย (รวมถึงไคลเอนต์และเซิร์ฟเวอร์)
- หน้าบล็อกทริกเกอร์เหตุการณ์ (หน้าบล็อกบนการโหลดและมีการแปลเนื่องจากจะป้องกันไม่ให้หน้าโหลดมีข้อสงสัยที่นี่)
- ไม่มีความหมาย (SEO เป็นส่วนสำคัญของการตลาดเว็บไซต์)
ในรุ่นถัดไปของ HTML5 ของ XHTML1.0 ไม่มีการสนับสนุนสำหรับแท็กเฟรมเซ็ตเนื่องจากผลกระทบด้านลบต่อความพร้อมใช้งานของหน้าเว็บซึ่งอธิบายปัญหาบางอย่างจากด้านข้าง
นอกจากนี้เนื่องจาก IFRAME ที่ฝังตัวไม่สามารถปรับให้เข้ากับขนาดเนื้อหาภายในโดยอัตโนมัติเพื่อรักษาความสมบูรณ์ของการแสดงหน้าหน้าจอแสดงผลจึงจำเป็นต้องเขียนสคริปต์ JavaScript เพื่อปรับขนาดทันทีตามการเปลี่ยนแปลงในเนื้อหา IFRAME คำขอที่กระจัดกระจายหลายรายการควบคู่ไปกับความจำเป็นในการใช้สคริปต์ JavaScript เพื่อแก้ไขเพิ่มความเสี่ยงของระบบการทำงานหลายหน้า iframe ดังนั้นมีวิธีที่ดีในการให้เนื้อหาหน้าเว็บเป็นแบบสาธารณะหรือไม่? ฝั่งเซิร์ฟเวอร์ทำให้เรามีโซลูชันมานานแล้ว รวมใน ASP และวิธีการที่ต้องการใน PHP ทั้งหมดใช้เพื่อรวมรหัสที่มีอยู่ในโปรแกรม นอกจากนี้ยังสามารถเปิดใช้งานส่วนหนึ่งของหน้า (เช่นเมนูการนำทางส่วนท้าย) ให้เป็นสาธารณะ อย่างไรก็ตามหลังจากทำงานแล้วมันจะเป็นหน้าเว็บที่สมบูรณ์ลดคำขอไคลเอนต์ได้อย่างมีประสิทธิภาพและไม่มีปัญหาในการปรับตัวสูงของ IFRames
