วิธีระบุเนื้อหา HTML ที่จะแสดงใน iframe ด้วย srcdoc

แอตทริบิวต์ srcdoc ของแท็ก <iframe> ใช้ระบุเนื้อหา HTML โดยตรง (inline HTML) ที่จะแสดงใน iframe แทนการโหลดจากไฟล์ภายนอกผ่าน src

ความแตกต่างระหว่าง src และ srcdoc

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <!-- ใช้ srcdoc แทน src -->
  <iframe srcdoc="<h2>Tutorialspoint</h2><p>เนื้อหา HTML โดยตรง</p>" 
          src="fallback.html">
    <p>เบราว์เซอร์ไม่รองรับ iframe หรือ srcdoc</p>
  </iframe>
  
  <br><br>
  
  <!-- ใช้ร่วมกับ src เป็น fallback -->
  <iframe srcdoc="<style>body{font-family:sans-serif;padding:1rem}</style><h1>Hello!</h1><p>This is inline HTML.</p>"
          src="https://example.com/fallback-page.html"
          width="400" height="200">
  </iframe>
</body>
</html>

ข้อควรระวัง

• ต้อง escape ตัวอักษรพิเศษใน HTML เช่น < → <, > → >, " → "
• srcdoc จะมีความสำคัญมากกว่า src (ถ้ารองรับ) - src ใช้เป็น fallback เมื่อเบราว์เซอร์ไม่รองรับ srcdoc
• ไม่ควรใช้กับเนื้อหาขนาดใหญ่ เพราะทำให้ HTML หลักอ่านยากและเพิ่มขนาดหน้าเว็บ

กรณีใช้งานจริง

• แสดงตัวอย่างโค้ด HTML/CSS/JS แบบ interactive
• ฝังวิดเจ็ตเล็กๆ เช่น ปฏิทิน นาฬิกา คำนวณ機
• แสดงเนื้อหาที่สร้างไดนามิกจาก JavaScript โดยไม่ต้อง request ไป server
• Sandbox ทดสอบโค้ดผู้ใช้ (ร่วมกับ sandbox attribute)

การเข้าถึง (Accessibility)

ควรให้ข้อความ fallback ระหว่างแท็ก iframe เปิด-ปิด สำหรับเบราว์เซอร์ที่ไม่รองรับ