<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#outerdiv
{
width:450px;
height:450px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-300px;
left:-250px;
width:700px;
height:700px;
}
-->
</style>
</head>
<body>
<div id='outerdiv'>
<iframe src="http://www.teenee.com" id='inneriframe' scrolling=no></iframe>
</div>
</body>
</html>ตัวอย่างอื่น
การใช้ iframe ในการดึงข่าวจากเว็บที่เราชอบ มาแสดงหน้าเว็บเรา
เช่นต้องการดึงข่าวจากเว็บ http://www.eng.psu.ac.th/enghome/index.php
เอาเฉพาะส่วนที่เป็นข่าวประชาสัมพันธ์ จะเขียน code ได้ว่า
<iframe src ="http://www.eng.psu.ac.th/enghome/index.php" width="785" height="2355" border="0" scrolling="no" hspace="-255" vspace="-1530" > </iframe> <!-- width=จัดการด้านขวา height=จัดการด้านล่าง hspace= จัดการด้านซ้าย vspace= จัดการด้านบน -->
แบบใช้ CSS
<style type="text/css">
body {
margin-top: -1080px;
margin-left: -190px;
}
</style>
<iframe src ="http://www.kapook.com" target="_blank" width="560" height="1500" border="0" frameborder="0" scrolling="no" hspace="-210" vspace="-1090" marginwidth="0" marginheight="0" ></iframe>เพิ่มเติม
<iframe src ="http://drupal.in.th/node/467" width="785" height="2355" border="0" scrolling="no" hspace="-255" vspace="-1530" > </iframe> <iframe src ="http://drupal.in.th/node/467" width="785" height="2355" border="0" scrolling="no" hspace="-255" vspace="-1530" ></iframe> <IFRAME src="http://wallpaper.thaiware.com/wallpapertoday.php?bgcolor=FFFFFF"width="100%" marginheight="0" marginwidth="0" frameborder="0" height="120"scrolling=no noresize></IFRAME>
การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย OK
<!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>ข้อมูลบริษัทประกันภัย</title>
<style type="text/css">
body{
background-color:#FFF;
}
/* ส่วนกำหนดสำหรับ แสดง iframe */
div#myiframe_position1{
position:relative;
margin:auto;
display:block;
width:970px; /*ความกว้างส่วนของเนื้อหา iframe ที่ต้องการแสดง*/
height:550px; /* ความสูงส่วนของเนื้อหา iframe ที่ต้องการแสดง */
overflow:hidden;
}
/* ส่วนกำหนด สำหรับ iframe */
div#myiframe_position1 iframe{
position:absolute;
display:block;
float:left;
margin-top:-487px; /* ปรับค่าของ iframe ให้ขยับขึ้นบนตามตำแหน่งที่ต้องการ */
margin-left:-210px; /* ปรับค่าของ iframe ให้ขยับมาด้านซ้ายตามตำแหน่งที่ต้องการ */
}
</style>
</head>
<body>
<div id="myiframe_position1">
<iframe src="http://www.oic.or.th/th/search/companies.php" scrolling="no" frameborder="0" width="1000" height="1000"></iframe>
</div>
</body>
</html>
ส่วนสำคัญ คือ การกำหนดความกว้าง และความสูงของ iframe อย่างน้อยต้องกว้างหรือสูงเท่ากับ
ขอบเขตของเนื้อหาที่ต้องการแสดง ในที่นี้ใช้ width=”1000″ height=”1000″ หากกำหนดไม่เหมาะสม
อาจทำให้ข้อมูล iframe ไม่แสดงได้
OK การดึงข้อมูลจากเวปอื่น ๆ ถ้าเราใช้ แค่
ตัวอย่างโค๊ด
<iframe src="http://www.oic.or.th/th/search/companies.php" width="440" height="280"></iframe>
จะดึงข้อมูลมาได้ แต่จะจัดตำแหน่งการแสดงผลไม่ได้ แต่ถ้าเปลี่ยนวิธี โดยการใช้ CSS ช่วยในการ
แสดงผลด้วย
<html>
<head>
<style type="text/css">
#outerdiv {
height:400px;
overflow: hidden;
position: relative;
width: 970px;
}
#inneriframe {
height: 900px;
left: -220px;
position: absolute;
top: -490px;
width: 970px;
}
</style>
</head>
<body>
<div id="outerdiv">
<iframe src="http://www.oic.or.th/th/search/companies.php" id="inneriframe" scrolling="no" ></iframe>
</div>
</body>
</html>