HTML Iframe จะใช้เพื่อแสดงหน้าเพจในเว็บเพจ หรือใช้ดึงหน้าเว็บอื่นมาแสดงในหน้าเว็บของเรา โดยที่สามารถกำหนดความยาว/ความกว้างที่แสดงได้
HTML Iframe Syntax
HTML <iframe> จะถูกใช้ใน Inline Frame โดยที่ Inline Frame จะใช้เพื่อฝังเอกสารอื่นๆ ในหน้า HTML ปัจจุบัน
รูปแบบการใช้งาน
<iframe src="url" title="description"></iframe>Tip: จะเป็นเรื่องที่ดีมากๆ หากใส่คำอธิบาย title ลงใน <iframe> ด้วย เพราะโปรแกรมจะได้อ่านและรู้ว่าเนื้อหาใน Iframe เกี่ยวกับเรื่องอะไร
การตั้งค่าความกว้างและความสูงของ Iframe
สำหรับความกว้างและความสูงของ Iframe สามารถตั้งค่าโดยไปกำหนดค่าที่ Attribute height กับ witdth โดยมีการระบุค่าของความกว้างและความสูงมีหน่วยเป็น Pixels
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>สามารถระบุความสูงและกว้างของ iframe โดยไปกำหนดค่าที่ Attribute height กับ width:</p>
<iframe src="demo_iframe.html" height="200" width="300" title="Iframe Example"></iframe>
</body>
</html>
หรือเพิ่ม Attribute style ลงใน CSS ในส่วนของ height และ width
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>สามารถใช้ Properties height และ width ของ CSS ในการระบุขนาดของ iframe:</p>
<iframe src="demo_iframe.html" style="height:200px;width:300px" title="Iframe Example"></iframe>
</body>
</html>
ลบเส้นขอบ (Border) ออกจาก Iframe
ค่าเริ่มต้นของ Iframe นั้นจะมีเส้นขอบอยู่รอบๆ Iframe หากต้องการลบเส้นขอบของ Iframe ออกไป ให้ใช้ Property border ของ CSS ใน Attribute style
<!DOCTYPE html>
<html>
<body>
<h2>ลบเส้นขอบ Iframe</h2>
<p>ลบเส้นขอบ iframe โดยใช้ CSS:</p>
<iframe src="demo_iframe.html" style="border:none;" title="Iframe Example"></iframe>
</body>
</html>
ซึ่งหากต้องการเปลี่ยนขนาด, รูปแบบ หรือสีของเส้นขอบของ Iframe สามารถแก้ไขได้โดยใช้ CSS
<!DOCTYPE html>
<html>
<body>
<h2>ปรับแต่งเส้นขอบของ Iframe</h2>
<p>ซึ่งหากต้องการเปลี่ยนขนาด, รูปแบบ หรือสีของเส้นขอบของ iframe สามารถแก้ไขได้โดยใช้ CSS:</p>
<iframe src="demo_iframe.html" style="border:2px solid red;" title="Iframe Example"></iframe>
</body>
</html>
การสร้าง Link เพื่อแสดงเว็บไซต์หรือหน้าเพจใน Iframe
หากต้องการให้ Iframe แสดงหน้าเว็บไซต์หรือหน้าเพจจากลิงก์ที่ระบุไว้สามารถทำได้โดยใช้ Attribute target ซึ่งจะต้องระบุ Attribute name ลงใน Iframe
<!DOCTYPE html>
<html>
<body>
<h2>การสร้าง Link ใน Iframe</h2>
<iframe src="demo_iframe.html" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://hostatom.com" target="iframe_a">hostatom.com</a></p>
<p>เมื่อลิงก์ตรงกับชื่อที่ระบุไว้ใน iframe เว็บไซต์หรือหน้าเพจจะแสดงใน iframe.</p>
</body>
</html>
เมื่อคลิกที่คำว่า hostatom.com Iframe จะแสดงดังภาพ
