Khác biệt giữa window.location.href, window.location.replace và window.location.assign trong JavaScript

Đối tượng window.location cung cấp ba phương thức/thuộc tính chính để điều hướng trang. Hiểu rõ sự khác biệt giúp tránh lỗi lịch sử duyệt web (history) và hành vi quay lại (back button).

1. window.location.href

Thuộc tính đọc/ghi: Trả về URL hiện tại hoặc chuyển hướng và thêm vào lịch sử (giống click link).

<!DOCTYPE html>
<html>
<body>
  <p>Nhấn để lấy URL trang hiện tại.</p>
  <button onclick="display()">Lấy URL</button>
  <script>
    function display() {
      var res = location.href;
      document.write(res);
    }
  </script>
</body>
</html>

2. window.location.replace()

Phương thức: Thay thế trang hiện tại trong lịch sử (không thêm entry mới). Người dùng không thể quay lại (Back) trang trước.

<!DOCTYPE html>
<html>
<body>
  <button onclick="display()">Thay thế trang hiện tại</button>
  <script>
    function display() {
      location.replace("https://www.example.com");
    }
  </script>
</body>
</html>

3. window.location.assign()

Phương thức: Tải trang mới và thêm vào lịch sử (giống href). Người dùng có thể quay lại.

<!DOCTYPE html>
<html>
<body>
  <button onclick="display()">Mở trang mới</button>
  <script>
    function display() {
      location.assign("https://www.example.com");
    }
  </script>
</body>
</html>

Bảng so sánh nhanh