พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onerror Event Attribute

onerror ใน HTML5 เป็น event attribute ที่ใช้ในการจัดการข้อผิดพลาดที่เกิดขึ้นในระหว่างการโหลดไฟล์ เช่น การโหลดรูปภาพ, ไฟล์สคริปต์, หรือเอกสารต่างๆ ที่มีข้อผิดพลาด ทำให้ไม่สามารถโหลดหรือประมวลผลได้สำเร็จ

การใช้งาน onerror

onerror สามารถใช้กับแท็ก HTML หลายประเภท เช่น <img>, <script>, <link> โดยจะเกิดเหตุการณ์เมื่อมีการโหลดข้อมูลล้มเหลวหรือมีข้อผิดพลาดในกระบวนการ

รูปแบบการใช้งาน onerror

ใช้งานกับรูปภาพ (<img>) เมื่อไม่สามารถโหลดรูปภาพได้ อาจเป็นเพราะไฟล์ไม่อยู่ในตำแหน่งที่ระบุ เราสามารถใช้ onerror เพื่อแทนที่รูปภาพที่ไม่สามารถโหลดได้ด้วยรูปภาพอื่น

HTML
<img src="invalid-image.jpg" onerror="this.src='backup-image.jpg';" alt="Image not found">

หากรูป invalid-image.jpg ไม่สามารถโหลดได้ ฟังก์ชัน onerror จะถูกเรียกและเปลี่ยนแปลง src เป็น backup-image.jpg แทน

ใช้งานกับไฟล์สคริปต์ (<script>) หากไฟล์ JavaScript ไม่สามารถโหลดได้ เราสามารถทำการแจ้งเตือนหรือประมวลผลอื่นๆ เมื่อเกิดข้อผิดพลาด

HTML
<script src="invalid-script.js" onerror="console.error('Failed to load script');"></script>

หากไฟล์ invalid-script.js ไม่สามารถโหลดได้ ระบบจะพิมพ์ข้อความ “Failed to load script” ลงในคอนโซล

ใช้งานกับ CSS (<link>) ในกรณีที่ไม่สามารถโหลดไฟล์ CSS เราสามารถใช้ onerror เพื่อตรวจสอบข้อผิดพลาดและทำการประมวลผลเพิ่มเติม

HTML
<link rel="stylesheet" href="invalid-style.css" onerror="alert('CSS file failed to load');">

หากไฟล์ CSS ไม่สามารถโหลดได้ จะมีการแสดงกล่องข้อความแจ้งเตือนว่า “CSS file failed to load”

ใช้งานกับ Window Level onerror สามารถนำไปใช้ในระดับของ window เพื่อจัดการกับข้อผิดพลาดของสคริปต์ที่เกิดขึ้นในหน้าทั้งหมด

HTML
<script>
  window.onerror = function(message, source, lineno, colno, error) {
    console.error(`Error: ${message} at ${source}:${lineno}:${colno}`);
  };
</script>

ในตัวอย่างนี้ หากเกิดข้อผิดพลาดในสคริปต์ ระบบจะเก็บข้อมูลเกี่ยวกับข้อความข้อผิดพลาด, แหล่งที่มาของไฟล์, และตำแหน่งบรรทัดที่เกิดข้อผิดพลาด แล้วแสดงในคอนโซล

ใช้กับฟังก์ชัน JavaScript แบบกำหนดเอง เราสามารถใช้ onerror เพื่อเรียกฟังก์ชัน JavaScript แบบกำหนดเองเพื่อจัดการข้อผิดพลาด

HTML
<img src="invalid-image.jpg" onerror="handleImageError(this)" alt="Image not found">

<script>
  function handleImageError(img) {
    img.src = 'backup-image.jpg';
    console.log('Image failed to load, using backup image.');
  }
</script>

เมื่อเกิดข้อผิดพลาดในการโหลดรูปภาพ ฟังก์ชัน handleImageError จะถูกเรียกเพื่อจัดการปัญหา

ประโยชน์ของการใช้ onerror

  • เพิ่มความเสถียรของเว็บไซต์: เมื่อเกิดข้อผิดพลาด เราสามารถประมวลผลทางเลือกหรือแสดงข้อความแจ้งเตือนเพื่อให้ผู้ใช้ทราบ
  • ช่วยในกระบวนการ debug: onerror ช่วยให้สามารถบันทึกหรือแสดงข้อมูลข้อผิดพลาดเพื่อการวิเคราะห์ได้
  • รองรับการทำงานได้ดียิ่งขึ้น: สำหรับเว็บไซต์ที่ต้องการโหลดไฟล์จากแหล่งข้อมูลต่างๆ (เช่น CDN) การจัดการข้อผิดพลาดจะช่วยเพิ่มประสบการณ์ที่ดีให้กับผู้ใช้

การใช้ onerror ในหลายกรณีทำให้เว็บไซต์สามารถจัดการข้อผิดพลาดอย่างยืดหยุ่นและตอบสนองได้ตามที่ต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ