iframe คือ HTML CODE ที่ใช้ในการดึงหน้าเว็บไม่ว่าจะเป็น path url จากเว็บเราหรือจากเว็บอื่น มาแสดงในเว็บของเราครับ และสามารถกำหนดได้ทั้งขนาดของกรอบที่จะแสดงว่า กว้าง / ยาวเท่าใหร่ ซึ่งบางที่ใช้ในการดึงกรอบข่าวสารจากเว็บอื่นๆมาแสดงที่เว็บของตัวเองครับ
ข้อดีของ iframe
ข้อดีอีกอย่างคือช่วยแบ่งการโหลดหน้าเว็บออกเป็นส่วนๆครับ ทำให้ลดการโหลดหน้าเว็บหลักของเราทำให้ดูเหมือนเว็บโหลดไวขึ้นครับ นอกจากนี้ยังสามารถดึงหน้าเว็บจากเว็บอื่นมาแสดงที่หน้าเว็บของเราได้ด้วย iframe เช่นเดียวกัน และ หากไฟล์หรือลิ้งค์ที่เราใส่ไว้ใน iframe เกิดมีปัญหา error ก็จะไม่ส่งผลกับหน้าเว็บหลักของเราครับ แต่จะไป error ในส่วนของ iframe แทนครับ และยังมีข้อดีอื่นๆอีกครับ แต่ก็ใช่ว่าจะมีแต่ข้อดีนะครับ เพราะการใช้ iframe ก็มีข้อเสียอยู่หลายส่วนเช่นกันครับ
ข้อเสียของ iframe
1. ไม่ดีต่อ robot search
หลังจากที่เราได้ทราบข้อดี และ ข้อเสียของ iframe แล้วต่อไปเรามาดูวิธีการเรียกใช้งานกันนะครับ ซึ่งวิธีการใช้งานก็ง่ายๆครับ เอา code iframe ไปไว้ใน html ส่วนที่เราต้องการให้แสดงผลครับ โดย code iframe สามารถเขียนคร่าวๆได้ดังนี้ครับ
1
2
|
< iframe src = "http://www.siammodify.com" height = "600" width = "700" > </ iframe > |
สำหรับ option ของ tag iframe นี้จะมีให้เลือกใช้อยู่มากมายครับ อยู่ที่เราจะใส่เข้าไปครับ ในที่นี้ผมจะช่วยเขียนอธิบายให้ทราบ เท่าที่หลักๆได้ใช้งานกันนะครับ
เป็น url ของหน้าที่ต้องการดึงมาแสดงใส่ได้ทั้งลิ้งค์ภายใน และ ลิ้งค์ภายนอกจากที่อื่นครับ
1
|
src="https://www.siammodify.com" |
ในส่วนนี้จะเป็นความสูงครับ
1
|
height="600" |
ความกว้างของกรอบ iframe ที่เราดึงมาแสดงครับ
1
|
width="700" |
สามารถใส่ได้ (auto | yes | no) ในส่วนนี้คือกำหนดให้กรอบของเรามี scrollbar หรือไม่
1
|
scrolling="auto" |
สามารถใส่ class และ id เช่นเดิม
1
|
class="{classname}" |
หลักๆสามารถใส่ได้ (0 | 1 | yes | no) หรือตัวเลขครับ ในส่วนนี้จะเป็น border ของกรอบครับ
1
|
frameborder="1" |
ระยะห่างจากขอบ
1
|
marginheight="" marginwidth="" |
สามารถใส่ style css ได้ตามปกติ
1
|
style="" |
สีของเส้นขอบ border ของกรอบ iframe
1
|
bordercolor="#CCCCCC" |
จัดกลาง / ขวา / ซ้าย
1
|
align="left" |