HTML Iframes

HTML Iframes จะใช้เพื่อแสดงหน้าเพจในเว็บเพจ หรือใช้ดึงหน้าเว็บอื่นมาแสดงในหน้าเว็บของเรา โดยที่สามารถกำหนดความยาว/ความกว้างที่แสดงได้

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 กับ witdth:</p>

<iframe src="demo_iframe.htm" 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.htm" 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 โดยใช้ use CSS:</p>

<iframe src="demo_iframe.htm" 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.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>

การสร้าง Link เพื่อแสดงเว็บไซต์หรือหน้าเพจใน iframe

หากต้องการให้ iframe แสดงหน้าเว็บไซต์หรือหน้าเพจจากลิงก์ที่ระบุไว้สามารถทำได้โดยใช้ attribue target ซึ่งจะต้องระบุ attribute name ลงใน iframe

<!DOCTYPE html>
<html>
<body>

<h2>การสร้าง Link ใน iframe</h2>

<iframe src="demo_iframe.htm" 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>