Iframes ใช้ในการแสดงผลเว็บภายในหน้าเว็บ ยกตัวอย่างเช่น เราต้องการอยากให้หน้าเว็บเกี่ยวกับ Tutorial ซักอย่างมาแสดงผลที่หน้าเว็บของเรา เราก็สามารถทำได้โดยใช้แท็ก <iframe> ซึ่งจะเป็นการฝัง URL ของเว็บที่ต้องการให้แสดงผลไว้ที่หน้าเว็บของเรา
ไวยากรณ์
<iframe src="url" title="description"></iframe>
ตัวอย่างที่ 1 การใช้ <iframe>
<html>
<body>
<iframe src="https://www.narasak.com/" title="ตัวอย่างการใช้ iframes พื้นฐาน"></iframe>
</body>
</html>
ไฟล์ที่ 1 การใช้ iframe พื้นฐาน
จากไฟล์ที่ 1 เมื่อเราแสดงผลหน้าเว็บอื่นในหน้าเว็บของเราแล้ว จะพบว่าขนาดเริ่มต้นของการแสดงผลอาจไม่ตรงกับความต้องการของเรา ซึ่งเราสามารถปรับแต่งขนาดความกว้าง และควาสูงได้ดังตัวอย่างที่ 2
ตัวอย่างที่ 2 การปรับขนาดของ iframe
<html>
<body>
<iframe src="https://www.narasak.com/" title="ตัวอย่างการใช้ iframes พื้นฐาน" width="100%" height="500px"></iframe>
</body>
</html>
ไฟล์ที่ 2 ปรับขนาดของ iframe
ไฟล์ที่ 2 ทำการปรับขนาดของ iframe ให้แสดงผลตรงตามความต้องการของเราโดย ปรับความกว้างเป็น 100% ของขนาดหน้าจอ และความสูงเป็น 500 พิกเซล
ผลลัพธ์