วิธีใส่iframe
- +



ของในห้องแจกของแจกฟรีทุกชิ้น

^ประกาศ pordoo.com คือเว็บสำหรับแจกสิ่งของ สมาชิกสะสมพอยท์ภายในเว็บเพื่อนำไปแลกของรางวัลที่ต้องการ
พอยท์ได้มาจากไหนบ้าง?
1.สมัครสมาชิกรับ 100 พอยท์
2.กดรับจากAdmin สัปดาห์ละ 100 พอยท์
3.สมาชิกคนอื่นกดให้พอยท์ (กดที่กล่องของขวัญ)
แจก 2,000 พอยท์ทุกสัปดาห์ รอบ8 คลิ้กเลย

ผู้เขียน หัวข้อ: วิธีใส่iframe  (อ่าน 384 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smfTopic starter

  • "ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,353
  • พอยท์: 4
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
  • คอมเมนต์สินค้า: (1)
วิธีใส่iframe
« เมื่อ: 26 กุมภาพันธ์ 2017, 16:27:12 »

แทรก iFrame ไว้ในหน้าเว็บและตำแหน่งที่ต้องการแสดงผล

โค๊ด: [Select]
<iframe name="I1" width="100%" align="center" border="0" frameborder="0" src="http://www.url.com/shownewtopics.php" height="300" target="_blank">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

ตรง src ให้ใส่ลิงค์ให้ถูกต้องด้วยนะคะ  (ให้ใส่ URL ของไฟล์ที่ทำไว้ในตอนเเรก)
และตั้งค่าความสูงของ iFrame ให้เหมาะสมตามต้องการ

ออฟไลน์ smfTopic starter

  • "ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,353
  • พอยท์: 4
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
  • คอมเมนต์สินค้า: (1)
รู้จักกับ iframe
« ตอบกลับ #1 เมื่อ: 26 กุมภาพันธ์ 2017, 17:41:26 »

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

รู้จัก iframe ทำไมต้อง iframe
อย่างที่พูดมาขั้นต้นแล้วว่า iframe เป็นการดึงข้อมูลไฟล์เอกสาร html หรือ สคริ๊บต่างๆ ออกมาหน้าเวป โดยความจริงแล้วการดึงข้อมูลเหล่านั้นขึ้นหน้าเวปนั้น จำเป็นต้องใช้ พวกสคริ๊บต่างๆ เช่น cgi ,asp, php ต่างๆ ซึ่งเหล่านี้ต้องใช้คำสั่ง incude คือ การดึงข้อมูลเขามา ออกหน้าเวป นั้นเอง ซึ่งจำเป็นต้องมี Server ที่รองรับระบบ SSI (Server Side Include)ถึงจะเอาออกหน้าเวปได้ ที่นี้เวปที่กำลังพัฒนาหรือริเริ่มทำที่ใช้ host free อยู่อาจจะมีปัญญาเรื่องนี้เยอะเหมือนกัน เพราะปัจจัยหลัก คือ ความอยากของเวปมาสเตอร์นั้น อยากจะมีเวปบอร์ดขึ้นหน้าเวปได้เหมือนเวปต่างๆ เขา คิดว่าหลายคนคงผ่านความรู้สึกนี้มา เหมือนกันเมื่อก่อนพัฒนาไทยกราฟ ก็มีปัญหาแบบนี้เช่นกัน เลยต้องศึกษาการใช้ สคริ๊บพวก cgi เพื่อทำเวปบอร์ดขึ้นมาหน้าเวป เมื่อทำได้แล้วก็ไม่รู้จะทำยังไงให้มันออกหน้าเวป จนได้เรียนรู้หลักการ Include จนสามารถนำเอาเวปบอร์ดออกหน้าเวปได้ และพอมาทำเป็นระบบ php ก็ง่ายอะไรเช่นนี้ที่จะเอาออกหน้าเวปได้ แต่มีปัญหาอย่างหนึ่งคือ ตัวเวปบอร์ดเก่าซึ่งเป็นเวปบอร์ด โชว์รูปภาพ ซึ่งมีฐานข้อมูลมากถึงการ 1000 ผลงานของสมาชิก แหละนั้นก็คือ เสน่ของเวป ก็เกิดความอยากขึ้น คือ อยากจะเอา cgi include ออกหน้า เวป php และคิดว่าถ้าเอาออกหน้าเวปได้คงจะทำให้คนเข้าถึงจุดเด่นในเวปได้ ก็ไปค้นหาข้อมูลใน google โดยค้นหาคำว่า cgi include php ก็ไม่เจอ เจอบ้างแต่ งงเหมือนกันในการนำเอาไปใช้ ทำยังไงหนา... มันน่าจะมีวิธีที่ง่ายกว่านี้นะ และแล้วจนมารู้จักเจ้าตัว iframe เป็นคำสั่ง ดึงข้อมูลออกหน้าเวปง่ายดาย ก็สามารถนำเอาเวปบอร์ดโชว์กราฟิก ขึ้นหน้าเวปได้ เย้... ความอยากก็สำเร็จอีกแล้วแล้วครับท่าน...

เรียนรู้หลักการวิธีการใช้ iframe
การจะใช้ iframe ได้นั้นแน่นอน ท่านต้องเข้าใจ html พอสมควรหรือพอรู้ว่าอะไรเป็นอะไรบ้างใน code html เพราะเจ้า iframe นั้นมันจะทำการ แทรก ใน code html เท่านั้น เอาหละเริ่มการใช้ iframe ณ บัดนี้ 

ขั้นตอนนี้1. เมื่อท่านได้ออกแบบหน้าเวปโดยผ่านโปรแกรมต่างๆ แล้ว ณ ที่นี้จะใช้ Dream weaver MX สาธิตวิธีการทำ ดังตัวอย่าง. ท่านได้ออกแบบหน้า Layout เวปจาก Dream โดยการทำโครงร่าง Table คำนวนออกมาเป็นหน้าเวป แล้วให้ท่านทำการ ทำเครื่องหมายหรือ สัญลักษณ์ ตัวอย่างจะใช้คำว่า iframe ใว้ในช่อง Table ที่เราต้องการให้เวปบอร์ดออกในตำแหน่งหน้าแรกของเวป
 
 
 

 
 ขั้นตอนที่2. ให้ทำการคลิกที่ปุ่ม Show code view หรือมาที่คำสั่ง View --> Code ก็ได้เพื่อให้แสดง Code html ออกมาหลังจากนั้นเราก็ทำการหา จุดที่เราทำเครื่องหมายหรือใส่ข้อความบอกตำแหน่งใว้ ถ้าหาไม่เจอยังไงก็ค้นหาได้โดยมาที่คำสั่ง Edit --> Find and Replace จากนั้นให้พิมพ์คำที่ต้องการลงไปแล้วกดปุ่ม Find next ก็จะเจอเครื่องหมายหรือตัวอักษรที่บอกตำแหน่ง code ได้โดยสังเกตจากเส้นทึบที่ทับ ตัวอักษร iframe ที่เราทำใว้ ดังตัวอย่าง.
 
 
 
ขั้นตอนที่3. เมื่อรู้ตำแหน่ง code ที่เราทำสัญลักณ์ใว้แล้วหลังจากนั้นให้ทำการพิมพ์คำสั่ง iframe ลงไปดังตัวอย่าง.
 
 
 
ขั้นตอนที่4. จาก code สิงที่เราต้องแก้เพื่อสามารถใช้ดึงข้อมูลได้นั้น คือ ส่วนของ src จะดึงในรูปแบบของ http://www แล้วตามด้วย URL ที่อยู่ของไฟล์ในตัวอย่าง สคริ๊บหน้าแรกของเวปบอร์ดที่โชว์กระทู้รวมอยู่ตำแหน่งที่ http://www.thaigraph.com/cgi-bin/webboard/view2.cgi?board=board_1 เพื่อจะดึงออกมาหน้าเวป โดยมีข้อแม้ว่า ข้อมูลนั้นต้องเป็นแบบข้อมูลเดี่ยวๆ โดยไม่มีองค์ประกอบอื่นๆ เกี่ยวข้องเช่น เมนูด้านบนด้านข้างต่างๆ คือเป็นหน้าข้อมูลล้วนๆ เลย ดังภาพตัวอย่าง.
 

 
ขั้นตอนที่5. จาก Code iframe ในขั้นตอนที่3. เราต้องปรับความกว้างความสูงให้เข้ากับขนาดของข้อมูลถ้าไม่ปรับได้ในขนาดพอดีจะเกิด SCROLLBAR ด้านข้างและด้านล่างเกิดขึ้นทำให้ไม่สวยแล้วดูออกมาเป็น iframe ควรจะวัดให้ขนาดพอดีหรือเลยมานิดหนึ่ง เพื่อให้ดูกลมกลืนกับเวปหน้าแรกของเรา เทคนิควิธีการวัดขนาด โดยใช้การ Print Screen หน้าเวปลงในPhotoshopจากนั้นให้ทำการใช้เส้น Selection วัด โดยใช้อุปกรณ์ Marquee tool สร้างเส้น Selection จากนั้นให้มาคำสั่ง Edit --> Copy แล้วมาที่คำสั่ง File --> New แล้วให้ สังเกตดูค่า Width และ Heigth จากนั้นก็เอาค่านั้นไปใส่ค่าที่ได้ เอาไปใส่ใน Code iframe แล้วลองเอาไฟลืหน้าแรก Upload ขึ้น Server แล้วลองทดสอบดูจนได้ iframe ที่ดูกลมกลืนกับเวป ก็ เป็นอันเสร็จกระบวนการ
 


 

 
 สรุปข้อดีข้อเสียงของการใช้ iframe
ข้อดี
: ง่ายในการดึงข้อมูลมาออกหน้าเวปได้ดั่งใจโดยผ่าน code html
ข้อเสีย
: ทำให้การโหลดของเวปช้าลงบ้าง เพราะดึงข้อมูลอีก Windows หนึ่งมาออกอีกหน้า Windows หนึ่งทำให้เหมือนเอาสองหน้า จอมาเบียดเสียดในหน้าเดียว เป็นไงบ้างขอรับพอทำได้ไหมคงสามารถนำมาประยุกต์ได้เยอะเลยหละสำหรับเวปมาสเตอร์มือใหม่ทุกท่าน เพื่อสามารถนำมาประยุกต์ และพัฒนาเวปได้ดียิ่งขึ้น และเพิ่ม Vision (มุมมอง) ในการทำระบบเวปไปอีกขั้นหนึ่ง จงจำใว้ว่าเมื่อเราได้เรียนรู้สิ่งใดสิ่งหนึ่งระยะเวลาจะทำ ให้ Vision (มุมมอง) ของเราในเรื่องนั้นกว้างใกล้ยิ่งขึ้นถ้าเราไม่คิดที่จะหยุดค้นหาและพัฒนามัน ...
 
"ผู้เรียนรู้ย่อมจักรู้จริงและเข้าใจในสิ่งที่เรียนรู้"
ขอปัญญาเกิดแด่ท่าน ธนา mastertana



ที่มา: http://www.thaigraph.com/thread-178-1-1.html
« แก้ไขครั้งสุดท้าย: 26 กุมภาพันธ์ 2017, 19:20:28 โดย smf »

ออฟไลน์ smfTopic starter

  • "ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,353
  • พอยท์: 4
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
  • คอมเมนต์สินค้า: (1)
Re: วิธีใส่iframe
« ตอบกลับ #2 เมื่อ: 26 กุมภาพันธ์ 2017, 18:08:17 »

วันนี้ขออธิบายถึง iframe กันนะครับ สำหรับคนทำเว็บใหม่ๆ อาจจะพึ่งรู้จักในที่นี้ผมเลยจะขออธิบาย แบบตามความเข้าใจของผมเลยแล้วกันนะครับ เพื่อเป็นแนวทางในการเรียกใช้งานสำหรับ webmaster มือใหม่ทั้งหลาย

iframe คือ HTML CODE ที่ใช้ในการดึงหน้าเว็บไม่ว่าจะเป็น path url จากเว็บเราหรือจากเว็บอื่น มาแสดงในเว็บของเราครับ และสามารถกำหนดได้ทั้งขนาดของกรอบที่จะแสดงว่า กว้าง / ยาวเท่าใหร่ ซึ่งบางที่ใช้ในการดึงกรอบข่าวสารจากเว็บอื่นๆมาแสดงที่เว็บของตัวเองครับ

ข้อดีของ iframe
 ข้อดีอีกอย่างคือช่วยแบ่งการโหลดหน้าเว็บออกเป็นส่วนๆครับ ทำให้ลดการโหลดหน้าเว็บหลักของเราทำให้ดูเหมือนเว็บโหลดไวขึ้นครับ นอกจากนี้ยังสามารถดึงหน้าเว็บจากเว็บอื่นมาแสดงที่หน้าเว็บของเราได้ด้วย iframe เช่นเดียวกัน และ หากไฟล์หรือลิ้งค์ที่เราใส่ไว้ใน iframe เกิดมีปัญหา error ก็จะไม่ส่งผลกับหน้าเว็บหลักของเราครับ แต่จะไป error ในส่วนของ iframe แทนครับ และยังมีข้อดีอื่นๆอีกครับ แต่ก็ใช่ว่าจะมีแต่ข้อดีนะครับ เพราะการใช้ iframe ก็มีข้อเสียอยู่หลายส่วนเช่นกันครับ

ข้อเสียของ iframe
 1. ไม่ดีต่อ robot search
หลังจากที่เราได้ทราบข้อดี และ ข้อเสียของ iframe แล้วต่อไปเรามาดูวิธีการเรียกใช้งานกันนะครับ ซึ่งวิธีการใช้งานก็ง่ายๆครับ เอา code iframe ไปไว้ใน html ส่วนที่เราต้องการให้แสดงผลครับ

โดย code iframe สามารถเขียนคร่าวๆได้ดังนี้ครับ
โค๊ด: [Select]
<iframe src="http://www.siammodify.com" height="600" width="700" ></iframe>
สำหรับ option ของ tag iframe นี้จะมีให้เลือกใช้อยู่มากมายครับ อยู่ที่เราจะใส่เข้าไปครับ ในที่นี้ผมจะช่วยเขียนอธิบายให้ทราบ เท่าที่หลักๆได้ใช้งานกันนะครับ

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


ที่มา: http://www.siammodify.com/html-%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-iframe-%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2.html
« แก้ไขครั้งสุดท้าย: 26 กุมภาพันธ์ 2017, 18:18:43 โดย smf »

ออฟไลน์ smfTopic starter

  • "ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,353
  • พอยท์: 4
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
  • คอมเมนต์สินค้า: (1)
การใช้งานคำสั่ง IFRAME ใน HTML
« ตอบกลับ #3 เมื่อ: 26 กุมภาพันธ์ 2017, 19:17:33 »

เคยมั้ยครับที่คุณ ต้องการนำ ข่าว หรือ Free-webboard ต่างๆ มาลงหน้าเว็บ โดยที่คุณไม่รู้ คำสั่ง php หรือ คุณ
 ทราบคำสั่ง php แต่คุณไม่ ทราบชื่อ Table ของ ตัวข้อมูลที่คุณต้องการนำมาใช้งาน คำสั่ง IFRAME จึงมามีความ
 หมายกับคุณ ก็ตอนนี้ละครับ

คำสั่ง IFRAME มีรูปแบบการเขียนโค้ด ดังนี้
<IFRAME name=ชื่อของ IFRAME ของคุณ src=ชื่อ URL ของ IFRAME ของคุณ width=ขนาดความกว้าง height=ขนาดความสูง frameborder=ขนาดเส้นขอบ scrolling=ตัว SCROLLBAR></IFRAME>

//  ขนาดของเส้นขอบถ้าไม่ต้องการ ให้ใส่ frameborder=0
// SCROLLBAR ถ้า ต้องการให้ใส่ scrolling=yes // ถ้า ไม่ต้องการให้ใส่ scrolling=no


ที่มา: http://www.pantips.com/webthaidd/html/webthaidd_article_658_.html
« แก้ไขครั้งสุดท้าย: 26 กุมภาพันธ์ 2017, 19:19:38 โดย smf »

แท็ก:
 
แชร์บทความ...
โค้ดแบบ forum
(BBCode)
โค้ดแบบ site/blog
(HTML)


anything