HTML
Media
iframe
บทนี้สอนผู้เริ่มต้นให้เข้าใจการใช้ `iframe` เพื่อฝังเนื้อหาจากหน้าอื่นหรือบริการภายนอกลงในหน้าเว็บ พร้อมอธิบาย `src`, `title`, `width`, `height` และแนวทางคุมขนาดให้พอดีกับ layout รวมถึงข้อจำกัดว่าบางเว็บไซต์ไม่อนุญาตให้ฝังผ่าน iframe
1. หัวข้อนี้คืออะไร
`iframe` คือแท็ก HTML สำหรับสร้าง "หน้าต่างฝัง" ที่แสดงเนื้อหาจากอีกหน้า อีกเว็บไซต์ หรืออีกบริการภายนอกภายในหน้าเว็บของเรา สิ่งสำคัญคือ iframe ไม่ได้คัดลอกเนื้อหาจากต้นทางมาแปะตรง ๆ แต่เป็นการเปิดมุมมองของเนื้อหาจากอีกแหล่งหนึ่งเข้ามาแสดงในกรอบที่เรากำหนดไว้
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้ใช้ดูเนื้อหาจากภายนอกได้โดยไม่ต้องออกจากหน้าเว็บปัจจุบัน
- เหมาะกับการฝัง YouTube, แผนที่, เอกสาร, แบบฟอร์ม หรือหน้าเว็บบางส่วนจากอีกระบบ
- ทำให้หน้าเรียนหรือหน้าอธิบายมีบริบทครบขึ้น เพราะแสดงเนื้อหาจากแหล่งจริงได้เลย
- ต้องคุมขนาดให้พอดีกับ layout เพื่อไม่ให้ iframe ใหญ่เกิน container หรือดันองค์ประกอบอื่นจนเสียสมดุล
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - ฝังวิดีโอ YouTube ในหน้าเรียนออนไลน์ - ฝังแผนที่ร้านหรือออฟฟิศในหน้าติดต่อ - ฝังเอกสารหรือคู่มือจากบริการภายนอก - ฝังหน้าสาธิตหรือเนื้อหาจากอีกระบบภายใน dashboard ทุกกรณีนี้ใช้ `iframe` เพื่อให้ผู้ใช้เห็นเนื้อหาจากต้นทางได้โดยไม่ต้องสลับหน้าไปมา
4. แนวคิดหลักที่ต้องเข้าใจ
- `src` คือ URL ของเนื้อหาที่ต้องการฝังลงใน iframe
- `title` คือคำอธิบายสั้น ๆ ของ iframe ที่ควรมี เพื่อช่วยให้ผู้ใช้และเครื่องมือช่วยเข้าถึงเข้าใจว่ากรอบนี้คืออะไร
- `width` และ `height` ใช้กำหนดขนาดเริ่มต้นของหน้าต่างฝัง
- iframe เป็นหน้าต่างแยกจากหน้าแม่ จึงไม่ได้ดึง HTML ของอีกหน้าเข้ามาปนกับ DOM หลักโดยตรง
- บางเว็บไซต์ไม่อนุญาตให้ฝังผ่าน iframe เพราะมีนโยบายความปลอดภัยของตัวเอง
- ขนาดของ iframe ควรพอดีกับ container และมักใช้ CSS เช่น `max-width: 100%` เพื่อไม่ให้ล้น layout
5. การทำงานทีละขั้นตอน
- 1) วางแท็ก `<iframe>` ในตำแหน่งที่ต้องการแสดงเนื้อหาภายนอก
- 2) ใส่ `src` ให้ชี้ไปยัง URL ที่ต้องการฝัง
- 3) เพิ่ม `title` แบบสั้นและชัดเจน เช่น บอกว่าเป็นวิดีโอ แผนที่ หรือเอกสาร
- 4) กำหนด `width` และ `height` ให้เหมาะกับพื้นที่ของหน้า
- 5) ถ้าจำเป็นค่อยใช้ CSS พื้นฐาน เช่น `max-width: 100%` เพื่อไม่ให้ iframe ล้น container
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้ใช้ `iframe` ฝังหน้าเว็บภายนอกแบบพื้นฐาน โดยมี `src`, `title`, `width`, `height` และ CSS พื้นฐานสำหรับคุมขนาดให้พอดีกับ container ถ้าเว็บไซต์ปลายทางปิดการฝังผ่าน iframe เราอาจไม่เห็นเนื้อหาตามคาด แม้ว่าโค้ดของเราจะถูกต้องก็ตาม
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า iframe คือการคัดลอก HTML จากอีกเว็บมาไว้ในหน้า ทั้งที่จริงเป็นการแสดงผลจากต้นทางในกรอบแยก
- ลืมใส่ `title` ทำให้กรอบที่ฝังไว้ไม่ชัดเจนว่าใช้ทำอะไร
- ใช้ลิงก์หน้าปกติแทน URL สำหรับ embed เช่นใช้หน้า YouTube ปกติแทนลิงก์ `/embed/...`
- กำหนด `width` หรือ `height` จน iframe ใหญ่เกิน container และดัน layout เสียสมดุล
- คาดหวังว่าเว็บทุกเว็บจะฝังผ่าน iframe ได้ ทั้งที่บางเว็บปิดการใช้งานแบบนี้
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `iframe` vs ลิงก์ (`a`) | iframe แสดงเนื้อหาจากอีกแหล่งภายในหน้า ส่วนลิงก์พาผู้ใช้ไปอีกหน้า | ถ้าต้องการให้ผู้ใช้เห็นเนื้อหาภายนอกได้ทันทีในหน้า ใช้ iframe |
| `iframe` vs คัดลอก HTML มาวางตรง ๆ | iframe เป็นกรอบที่แสดงเนื้อหาจากต้นทาง ส่วนการคัดลอก HTML คือย้ายโค้ดมาอยู่ในหน้าเราเอง | ถ้าต้องการแสดงเนื้อหาจากบริการภายนอกโดยไม่ดึงโค้ดมาปรับเอง ใช้ iframe |
| กำหนด `width`/`height` ตายตัว vs ปรับให้พอดี layout | ขนาดตายตัวอาจล้นหน้าบนจอเล็ก แต่การปรับให้พอดี layout ช่วยให้หน้าเว็บสมดุลกว่า | หน้า responsive ควรคุมขนาดร่วมกับ CSS |
| เว็บที่ embed ได้ vs เว็บที่ถูกบล็อกการฝัง | บางเว็บมี URL สำหรับ embed โดยตรง แต่บางเว็บตั้งนโยบายไม่ให้แสดงผ่าน iframe | ควรตรวจเสมอว่าแหล่งต้นทางรองรับการฝังหรือไม่ |
9. สรุปท้ายบทแบบจำง่าย
- `iframe` คือหน้าต่างฝังเนื้อหาจากอีกแหล่งหนึ่งเข้ามาในหน้าเว็บ
- เริ่มต้นจาก `src` เพื่อบอกว่าจะฝังอะไร
- ควรมี `title` เพื่ออธิบายกรอบที่ฝังไว้อย่างกระชับ
- กำหนด `width` และ `height` ให้เหมาะ และคุมขนาดเพิ่มด้วย CSS หากจำเป็น
- ไม่ใช่ทุกเว็บไซต์ที่อนุญาตให้ฝังผ่าน iframe
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้ใช้ iframe ได้ถูกต้องทั้งด้านโครงสร้าง ความชัดเจนของ attributes และการคุมขนาดให้เหมาะกับหน้าเว็บ
Lab 1 (พื้นฐาน): เพิ่ม iframe พร้อม src
ชื่อ Lab: ฝังกรอบจากภายนอกครั้งแรก เป้าหมาย: เพิ่ม iframe ที่มีแหล่งเนื้อหาครบอย่างน้อย 1 จุด โจทย์: ในพื้นที่ที่กำหนด ให้เพิ่ม <iframe id="intro-iframe" src="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe"></iframe> เงื่อนไข: ต้องมี iframe พร้อม src ที่ไม่ว่าง สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: สร้างแท็ก iframe -> ใส่ id -> ใส่ src ให้ชัดเจน
Lab 2 (กลาง): กำหนด title, width, height ให้เหมาะสม
ชื่อ Lab: ทำให้ iframe ชัดเจนและมีขนาดเหมาะสม เป้าหมาย: เพิ่ม attributes สำคัญที่ใช้บ่อยกับ iframe โจทย์: สร้าง <iframe id="video-iframe"> ที่มี src, title, width="560" และ height="315" เงื่อนไข: ต้องมี title ที่ไม่ว่าง และ width/height ตรงตามโจทย์ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: เริ่มจาก src -> ตามด้วย title -> แล้วกำหนดขนาดให้เหมาะกับเนื้อหาที่ฝัง
Lab 3 (ท้าทาย): แก้ iframe ที่ขาด attribute สำคัญหรือขนาดไม่เหมาะ
ชื่อ Lab: ซ่อม iframe ให้พร้อมใช้งานจริง เป้าหมาย: แก้ iframe ที่ขาด attribute สำคัญและมีขนาดล้น layout โจทย์: จากโค้ดตั้งต้น ให้แก้ <iframe id="map-iframe"> ให้มี src, title และทำให้ iframe ไม่ล้น container โดยยังอยู่ในกรอบเดิม เงื่อนไข: ต้องคง id เดิมเป็น map-iframe, ต้องมี src และ title ที่ไม่ว่าง และต้องคุมขนาดให้ไม่เกิน container สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ตรวจ 4 จุดหลักคือ src, title, width/height หรือ CSS และความพอดีกับ container