หน้าแรก  Help1 แจ้งข้อแนะนำ
การใช้งานเครื่องมือ iframe


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

สามารถกำหนดคุณสมบัติการแสดงผลของ iframe ทั้งขนาด กว้าง / สูง ได้ เช่น บางที่ใช้ในการดึงข่าวสารจากเว็บอื่นๆ ,ราคาน้ำมัน , youtube หรืออย่างใน คู่มือการใช้งานเว็บไซต์ ตรงมุม News Update หน้าแรก ก็ใช้ iframe ดึงมาแสดงผล เป็นต้นครับ (ดูตัวอย่างที่หน้าแรก ครับ)

สำหรับในบทความนี้ จะแนะนำการทำ iframe ที่ดึงบทความจากภายในเว็บไซต์

จะแบ่งออกเป็น 2 ขั้นตอน ดังนี้

ขั้นตอนที่1 : เตรียมหน้าบทความที่จะนำไปใช้กับ iframe

1. เข้าไปยังหน้าบทความ ที่จะดึงไปแสดง ยังส่วน iframe

2. หากยังไม่มีข้อมูลอะไร ก็ใส่ลงไปได้เลย ตัวอย่างด้วยภาพประกอบ (หากมีข้อมูลเดิมอยู่แล้ว ให้ข้ามไปข้อ 3 ได้เลย)

3. เลื่อนลงมา ด้านล่าง ของพื้นที่ดีไซต์

  • ตรง "ต้องการแสดงเทมเพลทหรือไม่ ? " ให้กำหนดเป็น no
    (เพื่อเวลา iframe ดึงบทความหน้านี้ไปแสดง จะได้ไม่มีเทมเพลทซ้อนกัน)

เสร็จแล้วคลิ๊กที่ปุ่ม  ได้เลย เป็นเสร็จในขั้นตอนที่1


ขั้นตอนที่2 : สร้าง iframe ยังหน้าที่จะแสดงผล

ตัวอย่าง ดังภาพประกอบ ในหน้าแรก สร้าง iframe เพื่อดึงบทความ จากไฟล์ NewsUpdate.html มาแสดง


1. เปิดไปยังหน้าแก้ไขที่จะใช้ iframe ดังภาพประกอบ

2. กำหนดตำแหน่ง iframe

  • (เลข1) คลิ๊กเมาส์ ยังตำแหน่งที่ใช้ iframe (ให้ pointer กระพริบ)
  • (เลข2) จากนั้นจึง คลิ๊กที่บริเวณเครื่องมือ ไอคอนiframe

3. กำหนดคุณสมบัติ iframe

IDเป็นการอ้างถึงใน java
การส่งค่าตัวแปร
ถ้าไม่ได้เขียน javascript ก็ไม่ต้องใส่ id
แต่ name ต้องใส่ถ้าส่งค่าของช่องนั้นไปบันทึก หรือส่งเมล์
ชื่อเป็นการอ้างถึงใน php
การส่งค่าตัวแปร
ที่อยู่อ้างอิง Url

ชื่อไฟล์ที่นำมาแสดง เช่น NewsUpdate.html
หรือ url เว็บไซต์อื่น ที่จะนำมาแสดง

ความกว้าง (width) ในที่นี่ตั้งเป็น 100% นั้นคือ ถ้าอยู่ใน ตาราง หรือเซลล์ ที่กำหนดความกว้าง 200 px ดังนั้น iframe ก็จะแสดงเต็ม 200 px
ความสูง (height)ส่วนใหญ่แล้ว มักกำหนดความสูง เป็น px ขนาดคงที่
marginHeight ระยะห่าง ด้านบนและด้านล่างของเฟรม ระหว่างขอบเฟรมกับข้อมูล
marginWidth ระยะห่าง ด้านซ้ายและด้านขวาของเฟรม ระหว่างขอบเฟรมกับข้อมูล
frameBorder ต้องการให้ แสดง
เส้นกรอบหรือไม่
Yes : แสดง เส้นกรอบ
No   : ไม่แสดง เส้นกรอบ
scrolling   กำหนดให้
แสดง / ซ่อนแถบเลื่อนข้อความ หรือไม่
  
Auto
Yes
No
allowTransparencyกำหนดให้ iframe พื้นหลังโปร่งใส่false : ไม่ใช้
true : ใช้

เมื่อกำหนดเสร็จแล้วกด  ออกมา

4. เสร็จแล้ว iframe ก็จะแสดงบทความ NewsUpdate.html ในหน้าแรก ดังภาพประกอบ


 วิธีการแก้ไข iframe เดิม เช่น การปรับความสูง


      1. นำเมาส์ไปวางที่บริเวณ iframe สังเกตุว่า mouse pointer จะเปลี่ยนเป็นรูป 4แฉก แล้วคลิ๊กเมาส์ ซ้าย 1 ครั้ง (ถ้าถูกต้องกรอบ iframe จะมีจุด 8 จุด ล้อมรอบ)
      2. จากนั้นคลิ๊กที่ ไอคอนiframe เพื่อแก้ไข เปลี่ยนจากค่าเดิม


เมนูที่เกี่ยวข้อง

คู่มือการใช้งาน
คู่มือโปรแกรมสำเร็จรูป
วิธีสร้างระบบสมาชิก
ฟอร์มสำเร็จรูป
ของแต่งเว็บไซต์ บทความทั่วไป การโปรโมทเว็บไซต์ ทริปแนะนำ
THTWEB MANUAL คู่มือการใช้งานเว็บไซต์