HTML5 การใช้งาน iframe Tag

<iframe> (Inline Frame) ใน HTML5 ใช้สำหรับฝังเนื้อหาจากเว็บอื่น ๆ หรือเนื้อหาภายในเว็บไซต์เดียวกันโดยไม่ต้องออกจากหน้าเว็บที่กำลังเปิดอยู่ เช่น การฝังวิดีโอจาก YouTube, แผนที่จาก Google Maps หรือเว็บเพจอื่น ๆ ลงในหน้าเว็บของเรา

การใช้งาน <iframe> Tag

โครงสร้างพื้นฐานของ <iframe> มีลักษณะดังนี้

<iframe src="URLของเว็บที่ต้องการฝัง"></iframe>

แอตทริบิวต์สำคัญของ <iframe>

src: ระบุ URL ของเนื้อหาที่ต้องการฝัง

<iframe src="https://www.example.com"></iframe>

width และ height: กำหนดความกว้างและความสูงของ iframe (เป็นพิกเซลหรือเปอร์เซ็นต์)

<iframe src="https://www.example.com" width="600" height="400"></iframe>

title: ใช้เพื่ออธิบายเนื้อหาภายใน iframe เพื่อช่วยเรื่อง SEO และการเข้าถึงของผู้ใช้

<iframe src="https://www.example.com" title="Example Website"></iframe>

sandbox: จำกัดการทำงานบางอย่างของ iframe เพื่อเพิ่มความปลอดภัย เช่น ป้องกันไม่ให้สคริปต์ภายใน iframe ทำงาน หรือป้องกันไม่ให้ iframe เปิดลิงก์ในแท็บใหม่

<iframe src="https://www.example.com" sandbox></iframe>

allow: ใช้กำหนดว่าคุณสมบัติใดบ้างที่อนุญาตให้ iframe ใช้งานได้ เช่น การเล่นวิดีโอแบบอัตโนมัติ หรือการเข้าถึงกล้อง

<iframe src="https://www.example.com" allow="autoplay; camera;"></iframe>

frameborder: ใช้เพื่อกำหนดการแสดงเส้นขอบ (deprecated ใน HTML5 แต่ยังมีใช้งานในบางเบราว์เซอร์)

<iframe src="https://www.example.com" frameborder="0"></iframe>

allowfullscreen: อนุญาตให้ iframe แสดงเนื้อหาในโหมดเต็มจอ

<iframe src="https://www.example.com" allowfullscreen></iframe>

loading: ควบคุมการโหลดของ iframe ว่าจะโหลดเนื้อหาทันทีหรือโหลดเฉพาะเมื่อเลื่อนมาถึง (lazy loading)

<iframe src="https://www.example.com" loading="lazy"></iframe>

ตัวอย่างการประยุกต์ใช้งาน

ฝังวิดีโอจาก YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

ฝังแผนที่จาก Google Maps

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

ฝังหน้าเว็บภายในเว็บเดียวกัน

<iframe src="/otherpage.html" width="100%" height="500"></iframe>

ความปลอดภัยและข้อควรระวัง

การใช้ <iframe> อาจนำไปสู่ช่องโหว่ทางความปลอดภัย (เช่น Clickjacking หรือ Cross-site Scripting) ดังนั้นการใช้แอตทริบิวต์ sandbox และ allow ช่วยให้เราสามารถควบคุมการทำงานของเนื้อหาได้มากขึ้นเพื่อป้องกันความเสี่ยง

สรุป

<iframe> เป็นเครื่องมือที่มีประโยชน์ในการฝังเนื้อหาจากภายนอกเว็บ แต่ต้องระมัดระวังเรื่องความปลอดภัยและประสิทธิภาพในการโหลดของเว็บ