onoffline และ ononline เป็น Event Attributes ที่ HTML5 มีไว้เพื่อช่วยตรวจจับสถานะการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้ โดยสามารถใช้เพื่อเพิ่มประสิทธิภาพการทำงานของเว็บแอปพลิเคชันที่ต้องการตรวจสอบสถานะการเชื่อมต่อได้ง่าย ๆ ไม่ว่าจะเป็นการเชื่อมต่ออยู่หรือไม่เชื่อมต่อ ซึ่งสามารถใช้งานได้ทั้งในส่วนของ <body> หรือในโค้ด JavaScript
การใช้งาน onoffline และ ononline
ononline: จะทำงานเมื่อเบราว์เซอร์เชื่อมต่อกับอินเทอร์เน็ตได้onoffline: จะทำงานเมื่อเบราว์เซอร์สูญเสียการเชื่อมต่ออินเทอร์เน็ต
การใช้งานใน <body>
ในตัวอย่างนี้ จะทำการตรวจสอบสถานะการเชื่อมต่อโดยตรงจากแท็ก <body> เมื่อมีการเปลี่ยนแปลงสถานะ จะเรียกฟังก์ชัน goOnline() หรือ goOffline() ขึ้นมาตามสถานะที่เกิดขึ้น
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online/Offline Example</title>
<script>
function goOnline() {
alert("คุณออนไลน์แล้ว!");
}
function goOffline() {
alert("คุณออฟไลน์แล้ว!");
}
</script>
</head>
<body ononline="goOnline()" onoffline="goOffline()">
<h1>ทดสอบการเชื่อมต่อออนไลน์และออฟไลน์</h1>
<p>เปลี่ยนสถานะการเชื่อมต่อเพื่อดูผลลัพธ์</p>
</body>
</html>การใช้งานผ่าน JavaScript
เราสามารถใช้การฟังเหตุการณ์ (Event Listener) ผ่าน JavaScript เพื่อทำงานกับ onoffline และ ononline ได้โดยตรงในไฟล์สคริปต์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online/Offline Example</title>
<script>
window.addEventListener('online', function() {
document.getElementById("status").textContent = "คุณออนไลน์แล้ว!";
document.body.style.backgroundColor = "lightgreen";
});
window.addEventListener('offline', function() {
document.getElementById("status").textContent = "คุณออฟไลน์แล้ว!";
document.body.style.backgroundColor = "lightcoral";
});
</script>
</head>
<body>
<h1>ทดสอบการเชื่อมต่อออนไลน์และออฟไลน์</h1>
<p id="status">กำลังตรวจสอบการเชื่อมต่อ...</p>
</body>
</html>การแสดงเนื้อหาเฉพาะในโหมดออฟไลน์
สามารถใช้เพื่อจัดการกับการแสดงผลข้อมูลที่เก็บไว้ (cached data) หรือข้อมูลสำรองในกรณีที่ผู้ใช้สูญเสียการเชื่อมต่ออินเทอร์เน็ต
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline Content Example</title>
<script>
function updateOnlineStatus() {
const status = navigator.onLine ? "ออนไลน์" : "ออฟไลน์";
document.getElementById("status").textContent = `สถานะปัจจุบัน: ${status}`;
if (!navigator.onLine) {
document.getElementById("offline-content").style.display = "block";
} else {
document.getElementById("offline-content").style.display = "none";
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
</script>
</head>
<body onload="updateOnlineStatus()">
<h1>ทดสอบการเชื่อมต่อออนไลน์และออฟไลน์</h1>
<p id="status"></p>
<div id="offline-content" style="display:none; color:red;">
<p>ขณะนี้คุณกำลังออฟไลน์ โปรดเชื่อมต่ออินเทอร์เน็ตเพื่อดูข้อมูลทั้งหมด</p>
</div>
</body>
</html>การประยุกต์ใช้งานในสถานการณ์จริง
- การแจ้งเตือนผู้ใช้: เมื่อต้องทำงานกับเว็บแอปพลิเคชันที่พึ่งพาข้อมูลจากเซิร์ฟเวอร์ สามารถใช้
onofflineและononlineเพื่อตรวจสอบสถานะการเชื่อมต่อและแจ้งเตือนผู้ใช้เมื่อเกิดการขาดการเชื่อมต่อ - การบันทึกข้อมูลสำรอง: ในกรณีที่แอปพลิเคชันต้องการให้ผู้ใช้สามารถทำงานในโหมดออฟไลน์ได้ สามารถใช้ฟังก์ชันเหล่านี้ร่วมกับ
localStorageหรือIndexedDBเพื่อจัดเก็บข้อมูลชั่วคราวและซิงค์ข้อมูลกลับไปยังเซิร์ฟเวอร์เมื่อกลับมาออนไลน์ - การอัปเดตเนื้อหาแบบเรียลไทม์: การใช้
ononlineเพื่อรีเฟรชหรืออัปเดตข้อมูลเมื่อผู้ใช้กลับมาออนไลน์ได้ ทำให้มั่นใจว่าผู้ใช้จะได้รับข้อมูลล่าสุด
onoffline และ ononline จึงเป็น Event Attributes ที่มีประโยชน์ในการทำให้เว็บไซต์สามารถปรับตัวให้เข้ากับสภาพแวดล้อมการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้