HTML <iframe> ใช้เพื่อ แสดงหน้าเว็บอื่นภายในหน้าเว็บของเรา หรือใช้ ฝังหน้าเพจจากภายนอก (เช่น เว็บไซต์อื่น หรือหน้าเพจในโดเมนเดียวกัน)
เราสามารถกำหนด ความกว้าง (width) และ ความสูง (height) ของ Iframe ได้อย่างอิสระ
HTML Iframe Syntax
HTML
<iframe> คือ Inline Frame ที่ใช้ฝังเอกสารหรือหน้าเว็บอื่นในเอกสาร HTML ปัจจุบัน โครงสร้างพื้นฐาน:
<iframe src="url" title="description"></iframe>
📝 Note
ควรใส่ค่าใน title เพื่อให้เครื่องมือช่วยอ่านเข้าใจว่า Iframe นั้นแสดงเนื้อหาเกี่ยวกับอะไร (ช่วยเรื่อง Accessibility)
การตั้งค่าความกว้างและความสูงของ Iframe
สามารถกำหนดขนาดของ Iframe ได้โดยใช้ Attribute
height และ width (หน่วยเป็น pixels)
<iframe src="demo_iframe.html" height="200" width="300" title="Iframe Example"></iframe>
นอกจากใช้ Attribute แล้ว ยังสามารถกำหนดขนาดผ่าน CSS ได้เช่นกัน
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
ลบหรือปรับแต่งเส้นขอบ Iframe
โดยค่าเริ่มต้น Iframe จะมีเส้นขอบรอบ ๆ หากต้องการ ลบเส้นขอบออก ใช้ CSS border:none;
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
หากต้องการปรับขนาด สี หรือรูปแบบของเส้นขอบ ใช้ CSS
border
<iframe src="demo_iframe.html" style="border:2px solid red;" title="Iframe Example"></iframe>
การสร้างลิงก์แสดงผลใน Iframe
คุณสามารถกำหนดให้คลิกลิงก์แล้วเปิดเว็บภายใน
<iframe> ได้
โดยใช้ Attribute name ใน <iframe> และ Attribute target ใน <a>
<iframe src="demo_iframe.html" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.hostatom.com" target="iframe_a">hostatom.com</a></p>
สรุป
- แท็ก
<iframe>ใน HTML ใช้สำหรับกำหนดเฟรมแบบฝังใน (inline frame) - แอตทริบิวต์
srcใช้สำหรับระบุ URL ของหน้าเว็บที่ต้องการฝัง - ควรใส่แอตทริบิวต์
titleเสมอ เพื่อให้เครื่องอ่านหน้าจอ (screen readers) สามารถเข้าใจเนื้อหาได้ - แอตทริบิวต์
heightและwidthใช้สำหรับกำหนดขนาดของiframe - ใช้คำสั่ง
border:none;เพื่อ ลบเส้นขอบรอบ ๆiframe