แท็ก iframe

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

เนื้อหาของเว็บไซต์ที่ถูกฝังจะมีการออกแบบของเว็บไซต์นั้นเอง โดยที่สไตล์ CSS ของเว็บไซต์เรา รวมถึงโค้ด JavaScript ของเรา จะไม่มีผลต่อเนื้อหาภายในแท็ก iframe

สามารถใช้ JavaScript ของเราควบคุมเนื้อหา iframe ได้ แต่ต้องทำด้วยวิธีการเฉพาะ

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

แอตทริบิวต์

แอตทริบิวต์	คำอธิบาย
`src`	ระบุที่อยู่ของหน้าเว็บที่ต้องการฝัง
`srcdoc`	อนุญาตให้กำหนดเนื้อหาของ iframe โดยตรงในแอตทริบิวต์
`frameborder`	กำหนดเส้นขอบรอบ iframe ค่า `yes` กำหนดให้มีเส้นขอบ (ค่าเริ่มต้น) ส่วนค่า `no` จะลบเส้นขอบออก
`scrolling`	กำหนดแถบเลื่อนภายใน iframe ค่า `auto` - มีแถบเลื่อนเมื่อจำเป็น (ค่าเริ่มต้น) ค่า `yes` - มีแถบเลื่อนตลอด ค่า `no` - ไม่มีแถบเลื่อน

ตัวอย่าง

มาฝัง iframe ที่มีเว็บไซต์อื่น (สำหรับตัวอย่าง ใช้ code.mu) ลงในเว็บไซต์ของเรากัน:

<iframe src="https://code.mu/" width="600" height="400"></iframe>

ตัวอย่าง

ฝังวิดีโอจาก YouTube ลงในเว็บไซต์ของเรา:

<iframe
	src="https://www.youtube.com/embed/KzQrHpB1H8U"
	allowfullscreen
	width="400"
	height="400">
</iframe>

ตัวอย่าง

เขียนเนื้อหาลงใน iframe โดยตรง:

<iframe
	srcdoc="<h1>หัวข้อ</h1><p>ข้อความ</p>"
	width="300"
	height="200">
</iframe>