พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน iframe

การใช้งาน iframe ใน HTML5 มีไว้เพื่อฝังเนื้อหา เช่น เว็บไซต์อื่น, วิดีโอ หรือไฟล์จากแหล่งภายนอกมาแสดงในหน้าเว็บเพจ โดยไม่ต้องเปลี่ยนหน้าเว็บของตัวเอง การใช้งานนี้เป็นประโยชน์ในการแสดงข้อมูลแบบฝังโดยไม่ต้องเปิดแท็บหรือหน้าต่างใหม่

การใช้งานพื้นฐานของ iframe

โครงสร้างพื้นฐานของการใช้งาน iframe มีดังนี้

HTML
<iframe src="https://www.example.com" width="600" height="400"></iframe>
  • src คือ URL ที่จะฝังเนื้อหามาแสดงใน iframe
  • width และ height กำหนดขนาดของ iframe

ตัวอย่างการใช้งานต่าง ๆ ของ iframe

ฝังเว็บไซต์อื่น

การฝังเว็บไซต์จากแหล่งอื่นเข้ามาในหน้าเว็บของเรา

HTML
<iframe src="https://www.example.com" width="100%" height="500"></iframe>

ในกรณีนี้ใช้ width="100%" เพื่อให้ขนาดกว้างเต็มของหน้าเว็บ และตั้งค่า height="500" เพื่อกำหนดความสูง

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

iframe ใช้กันอย่างแพร่หลายในการฝังวิดีโอจากเว็บไซต์ เช่น YouTube

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
  • src เป็นลิงก์ของวิดีโอ YouTube ที่ต้องการฝัง โดย VIDEO_ID เป็นรหัสเฉพาะของวิดีโอ
  • frameborder="0" ทำให้ขอบของ iframe ไม่แสดง
  • allowfullscreen อนุญาตให้วิดีโอขยายเต็มหน้าจอได้

การควบคุมการแสดงผลผ่านคุณสมบัติเพิ่มเติม

  • sandbox: ควบคุมความปลอดภัยในการแสดงผลใน iframe
HTML
<iframe src="https://www.example.com" width="600" height="400" sandbox></iframe>

sandbox ป้องกันการกระทำบางอย่างในเนื้อหาที่ฝัง เช่น การรัน JavaScript หรือการเปิดหน้าต่างใหม่

  • allow: อนุญาตให้ iframe ใช้ฟีเจอร์บางอย่าง เช่น fullscreen, autoplay, microphone, หรือ camera
HTML
<iframe src="https://www.example.com" width="600" height="400" allow="fullscreen; autoplay"></iframe>

การใช้ iframe ฝังไฟล์ PDF

สามารถใช้ iframe เพื่อฝังเอกสาร PDF ให้แสดงในหน้าเว็บได้

HTML
<iframe src="yourfile.pdf" width="100%" height="500"></iframe>

ในกรณีนี้ เราสามารถฝังไฟล์ PDF ที่อยู่ในเซิร์ฟเวอร์ของเรา หรือใช้ URL ของไฟล์ PDF จากภายนอกก็ได้

การใช้ iframe แบบตอบสนอง (Responsive)

ในบางกรณีการใช้ iframe ต้องการให้ขนาดตอบสนองต่อการปรับขนาดของหน้าจอ วิธีนี้จะช่วยให้ iframe ขยายหรือย่อตามขนาดของอุปกรณ์ได้อย่างเหมาะสม

HTML
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
    <iframe src="https://www.example.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>
</div>

ในตัวอย่างนี้ ใช้ div เพื่อควบคุมอัตราส่วนของ iframe (เช่น 16:9 โดยใช้ padding-bottom: 56.25%)

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ