แท็ก iframe
แท็ก iframe ช่วยให้สามารถฝังเนื้อหาจากเว็บไซต์หนึ่งไปยังอีกเว็บไซต์หนึ่งได้ มันถูกใช้เพื่อแสดงเนื้อหา เช่น วิดีโอ รูปภาพ หรือบทความ โดยไม่จำเป็นต้องเปิดหน้าต่างหรือแท็บใหม่
เนื้อหาของเว็บไซต์ที่ถูกฝังจะมีการออกแบบของเว็บไซต์นั้นเอง โดยที่สไตล์ CSS ของเว็บไซต์เรา รวมถึงโค้ด JavaScript ของเรา จะไม่มีผลต่อเนื้อหาภายในแท็ก iframe
สามารถใช้ JavaScript ของเราควบคุมเนื้อหา iframe ได้ แต่ต้องทำด้วยวิธีการเฉพาะ
แท็ก iframe ถูกใช้กันอย่างแพร่หลายบนเว็บไซต์ต่างๆ เพื่อฝังวิดีโอจาก YouTube และแพลตฟอร์มอื่นๆ รวมถึงสำหรับแสดงบทความและรูปภาพจากแหล่งอื่น
แอตทริบิวต์
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
src |
ระบุที่อยู่ของหน้าเว็บที่ต้องการฝัง |
srcdoc |
อนุญาตให้กำหนดเนื้อหาของ iframe โดยตรงในแอตทริบิวต์ |
frameborder |
กำหนดเส้นขอบรอบ iframe
ค่า yes กำหนดให้มีเส้นขอบ (ค่าเริ่มต้น)
ส่วนค่า no จะลบเส้นขอบออก
|
scrolling |
กำหนดแถบเลื่อนภายใน iframe
ค่า auto - มีแถบเลื่อนเมื่อจำเป็น (ค่าเริ่มต้น)
ค่า yes - มีแถบเลื่อนตลอด
ค่า no - ไม่มีแถบเลื่อน
|
ตัวอย่าง
มาฝัง iframe ที่มีเว็บไซต์อื่น (สำหรับตัวอย่าง ใช้ ) ลงในเว็บไซต์ของเรากัน:
html<iframe src="/" width="600" height="400"></iframe>
Результат:
ตัวอย่าง
ฝังวิดีโอจาก YouTube ลงในเว็บไซต์ของเรา:
html<iframe
src="https://www.youtube.com/embed/KzQrHpB1H8U"
allowfullscreen
width="400"
height="400">
</iframe>
Результат:
ตัวอย่าง
เขียนเนื้อหาลงใน iframe โดยตรง:
html<iframe
srcdoc="<h1>หัวข้อ</h1><p>ข้อความ</p>"
width="300"
height="200">
</iframe>
Результат: