วันอังคารที่ 21 สิงหาคม พ.ศ. 2555

iframe ดึงหน้าเว็บอื่นมาใส่หน้าเว็บเรา

iframe เป็น Tag สำหรับดึงหน้าเว็บอื่นมาแสดงบนหน้าเว็บเรา รูปแบบคำสั่งคล้ายๆ กับ tag img ที่ใช้แสดงรูปบนหน้าเว็บ เพียงแต่ tag iframe มี tag ปิดที่เป็นรูปแบบมาตรฐาน ส่วน tag img ไม่ต้องมี

รูปแบบคำสั่งที่แตกต่างกันระหว่าง tag iframe กับ tag img

tag iframe เขียนแบบง่ายๆ อย่างนี้

จากรูปแบบคำสั่งเป็นการดึง url http://www.rsonlinemusic.com/album.php?album_id=2150 มาแสดง และมี Option ควบคุมคือ width (ความกว้าง) height (ความสูง) scrolling (แสดงกรอบ)

เป็นธรรมดาของ tag ที่มีโครงสร้างขนาดใหญ่ที่จะมี Option เพิ่มเติมมากมาย tag iframe ก็เหมือนกันถือเป็น tag ขนาดใหญ่และนิยมนำมาใช้งานอย่างแพร่หลาย มี Option ที่นิยมใช้งาน ดังนี้

src="xxx" สำหรับใส่ลิงค์หรือ url อื่น
height="xxx" กำหนดความสูง หน่วยเป็นตัวเลข
width="xxx" กำหนดความกว้าง หน่วยเป็นตัวเลข หรือ เปอร์เซ็นต์
scrolling="xxx" เกี่ยวกับ scrollbar กำหนด yes ให้มี no ไม่ต้องมี auto อัตโนมัติ
frameborder="xxx" เกี่ยวกับกรอบ นิยมกำหนดเป็น 0,1 หรือ yes กับ no
bordercolor="xxx" สีของกรอบ ให้ใส่โค้ดของสีนั้นๆ


Option ของ tag iframe มีมากกว่านี้ แต่ที่นำมาแสดงก็ถือว่าเพียงพอสำหรับการนำมาใช้งานทั่วไป หากมีโอกาสคงจะได้พูดถึงมากกว่านี้

คำสั่งข้างล่างนี้แสดงตัวอย่างการใช้ tag iframe ดึงข่าวมาแสดง และผลที่ได้อยู่ในส่วนถัดไป


ตัวอย่างใช้ iframe ดึงข่าวมาแสดง

จะเห็นว่าสามารถนำ tag iframe มาประยุกต์ใช้ได้ตามต้องการ ไม่ว่าจะเป็นการดึงหน้าเว็บที่เป็นเพลง เป็นข่าว ตามตัวอย่างที่แสดงให้เห็นนั้น ทำความเข้าใจในรูปแบบคำสั่งและ Option ต่างๆ ให้แจ่มแจ้ง จะได้เป็นประโยชน์ในการทำเว็บไซต์ต่อไป.