แอตทริบิวต์ data ใช้ในแท็ก <object> เพื่อระบุ URL ของทรัพยากร (Resource) ที่จะฝังในหน้าเว็บ เช่น ไฟล์ Flash (SWF), PDF, ภาพ, วิดีโอ, หรือหน้าเว็บอื่น
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>สาธิตแท็ก Object</h2>
<object width="250" height="300" data="demo.swf">
<!-- Fallback เนื้อหาเมื่อไม่รองรับ -->
<p>เบราว์เซอร์ของคุณไม่รองรับ Object นี้</p>
<img src="fallback.jpg" alt="Fallback Image">
</object>
</body>
</html>แท็ก <object> แอตทริบิวต์สำคัญ
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| data | URL ของทรัพยากรที่จะฝัง |
| type | MIME Type (เช่น application/pdf, video/mp4, application/x-shockwave-flash) |
| width / height | ขนาดพิกเซล |
| name | ชื่อสำหรับ Target ของ Form/Link |
| form | เชื่อมกับ Form ID (HTML5) |
| typemustmatch | Boolean - ต้อง Match Type เท่านั้น (Security) |
ตัวอย่างฝัง PDF
<object data="document.pdf" type="application/pdf" width="100%" height="600px">
<p>ไม่สามารถแสดง PDF ได้ <a href="document.pdf">ดาวน์โหลดดูแทน</a></p>
</object>ตัวอย่างฝังหน้าเว็บอื่น (แทน iframe)
<object data="https://example.com" type="text/html" width="100%" height="500">
<p>ไม่สามารถฝังหน้านี้ได้</p>
</object>Object vs Iframe vs Embed
| แท็ก | ใช้สำหรับ | คุณสมบัติพิเศษ |
|---|---|---|
| <object> | ทุกประเภท (Generic Embed) | Fallback Content ภายใน, typemustmatch |
| <iframe> | ฝังหน้าเว็บ/เอกสาร | Sandbox, allow, referrerpolicy, CSP |
| <embed> | Plugin/External Content (Legacy) | Void element, ไม่มี Fallback |
| <video>/<audio> | Media นิยม | Controls, Media API, Tracks |
แนะนำ: ใช้ <video>/<audio> สำหรับสื่อ, <iframe> สำหรับหน้าเว็บ, <object> สำหรับ PDF/Plugin เฉพาะเจาะจง
