การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย
ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการแสดงผลข้อมูลใน iframe โดยเราสามารถเลือกจะให้
ข้อมูลในส่วนใด ของ iframe แสดงผลตามต้องการ
โค้ดตัวอย่างทั้งหมด พร้อมตัวอย่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css iframe position</title>
<style type="text/css">
body{
background-color:#FF9;
}
/* ส่วนกำหนดสำหรับ แสดง iframe */
div#myiframe_position1{
position:relative;
margin:auto;
display:block;
width:270px; /*ความกว้างส่วนของเนื้อหา iframe ที่ต้องการแสดง*/
height:700px; /* ความสูงส่วนของเนื้อหา iframe ที่ต้องการแสดง */
overflow:hidden;
}
/* ส่วนกำหนด สำหรับ iframe */
div#myiframe_position1 iframe{
position:absolute;
display:block;
float:left;
margin-top:-420px; /* ปรับค่าของ iframe ให้ขยับขึ้นบนตามตำแหน่งที่ต้องการ */
margin-left:-715px; /* ปรับค่าของ iframe ให้ขยับมาด้านซ้ายตามตำแหน่งที่ต้องการ */
}
</style>
</head>
<body>
<div id="myiframe_position1">
<iframe src="https://www.ninenik.com" scrolling="no"
frameborder="0" width="1000" height="1000"></iframe>
</div>
</body>
</html>
ตัวอย่าง
ส่วนสำคัญ คือ การกำหนดความกว้าง และความสูงของ iframe อย่างน้อยต้องกว้างหรือสูงเท่ากับ
ขอบเขตของเนื้อหาที่ต้องการแสดง ในที่นี้ใช้ width="1000" height="1000" หากกำหนดไม่เหมาะสม
อาจทำให้ข้อมูล iframe ไม่แสดงได้
