Giá trị window.location đại diện cho URL hiện tại bạn xem trong trình duyệt. Bạn có thể thay thế giá trị này để đến URL khác trong JavaScript. Điều này hữu ích nếu muốn chuyển hướng người dùng đến trang khác. Bạn cũng có thể dùng phương thức assign() hoặc replace().
Có vài lý do muốn chuyển hướng người dùng đến trang web khác hoặc đường dẫn cập nhật. Trong hầu hết trường hợp, bạn muốn chuyển hướng tùy thuộc vào authorization (ủy quyền) của người dùng – xem client đã đăng nhập trang web chưa. Trong bài này, xem cách làm trong trang web dùng JavaScript.
JavaScript Chuyển đến URL
API lịch sử trình duyệt JavaScript cho phép đến URL mới. Bạn có thể dùng các phương thức sau để điều hướng đến URL mới:
- Gán giá trị mới cho window.location.
- Dùng phương thức window.assign().
- Dùng phương thức window.replace().
Cả ba phương thức đạt mục tiêu điều hướng đến URL khác như nhau. Hãy xem từng phương thức.
Giá trị JavaScript window.location
Để điều hướng URL mới, dùng đối tượng location từ API Lịch sử Trình duyệt. Lịch sử phiên cho phép gán lại đối tượng location cho URL mới hoặc dùng thuộc tính href trên cùng đối tượng.
Cú pháp cách này:
window.location = "url";
"url" đại diện cho URL bạn muốn người dùng truy cập. Khi dòng mã chạy, chuyển hướng JavaScript bắt đầu. Điều này thay đổi trang người dùng xem trong trình duyệt.
Hãy xem phương thức này dạng ví dụ:
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
const handleClick = (e) => {
console.log("click")
window.location = ('https://careerkarma.com')
// window.location.href = ('https://careerkarma.com')
console.log(window.location)
}
Khi hàm handleClick() chạy, mã ghi câu lệnh ra console JavaScript. Sau đó, mã chuyển hướng đến URL mới.
JavaScript window.location.assign()
Đối tượng location có phương thức chuyển hướng gọi là assign(). Phương thức này gán URL hiện tại với URL được gán và thêm vào ngăn xếp lịch sử.
Ngăn xếp lịch sử đại diện cho các trang bạn đã xem (nghĩ về "mũi tên quay lại" cho phép quay lại trang trước).
Xem cú pháp sau:
window.location.assign("url");
Khác ví dụ trước, không cần gán giá trị cho biến JavaScript (window.location). Thay vào đó, dùng phương thức thay đổi trang web người dùng xem.
Ngăn xếp lịch sử là cách trình duyệt nhớ nút quay lại hoặc tiến tới nên đến đâu.
Hãy xem ví dụ đầy đủ phương thức này:
const handleClick = (e) => {
console.log("click")
window.location.assign('https://careerkarma.com');
}
Nếu muốn chuyển hướng đến trang khác cùng trang web, dùng thuộc tính pathname trên đối tượng location:
const handleClick = (e) => {
console.log("click")
window.location.pathname = ('/newpage.html')
console.log(window.location)
}
JavaScript window.location.replace()
Bạn có khả năng kiểm soát người dùng có dùng nút quay lại về trang trước không.
Dùng phương thức replace(), bạn điều hướng người dùng đến trang và ngăn không cho quay lại trang trước. Phương thức assign(), mặt khác, lưu trang trước trong lịch sử trình duyệt. Với assign() bạn xem trang trước.
Hãy xem phương thức replace():
window.location.replace("url");
Giống assign(), replace() là phương thức. Phương thức nhận một đối số: URL bạn muốn trỏ người dùng.
Ta dùng replace() với hàm tùy chỉnh thay đổi URL người dùng xem khi phương thức chạy:
const handleClick = (e) => {
console.log("click")
window.location.replace('https://careerkarma.com');
}
Dùng Repl.it này để thử các phương thức chuyển hướng URL tùy chọn. Dùng nút Run để reset mã về mặc định.
Kết luận
Có ba cách đến URL trong JavaScript: dùng window.location, phương thức window.location.assign(), hoặc window.location.replace().
Bạn muốn học thêm JavaScript? Xem hướng dẫn Cách học JavaScript. Hướng dẫn chứa mẹo hàng đầu học JavaScript và danh sách tài nguyên toàn diện cho người mới và trung cấp.