วิธี Redirect หน้าเว็บด้วย JavaScript

มีหลายวิธี redirect หน้าเว็บ: client-side ด้วย meta tag HTML, server-side ด้วย HTTP redirect บทความนี้ดูวิธี redirect ด้วย JavaScript

2 วิธีหลัก (ใช้ window.location)

1. location.href

กำหนด URL ให้ location.href ในฟังก์ชันที่รันเมื่อโหลดหน้า

<body onload="handleRedirect('https://example.com')">
  Redirecting to <a href="https://example.com">example.com</a>...
</body>
<script>
  const handleRedirect = (url) => {
    location.href = url;
  };
</script>

เพิ่มหน่วงเวลาก่อน redirect ด้วย setTimeout:

const handleRedirect = (url) => {
  setTimeout(() => { location.href = url; }, 2000); // 2 วินาที
};

คุณสมบัติ: เพิ่มหน้าต้นทางใน history stack กลับได้ด้วยปุ่ม Back

2. location.replace()

แทนที่ URL เดิม ไม่เพิ่มใน history stack ไม่มีปุ่ม Back กลับมาได้

<body onload="location.replace('https://example.com')">
  Redirecting...
</body>

ไม่ต้องใช้ script tag แค่ one-liner ใน onload

สรุป

ใช้ location.href ถ้าต้องการให้ user กลับได้ ใช้ location.replace() ถ้าต้องการแทนที่หน้าเดิมโดยไม่มี history