Nhiều URL được chuyển hướng đến các vị trí mới, thường sử dụng cấu hình máy chủ và thuộc tính tiêu đề HTTP. Nhưng có nhiều trường hợp bạn có thể cần sử dụng JavaScript để chuyển hướng hoặc điều hướng đến một URL khác
Có nhiều lý do tại sao bạn có thể muốn chuyển hướng đến một trang hoặc URL mới
- Bạn đã thay đổi tên miền hoặc cấu trúc URL của mình
- Bạn muốn chuyển hướng dựa trên ngôn ngữ, vị trí hoặc chế độ xem
- Người dùng đã gửi biểu mẫu và bạn muốn hướng họ đến trang tiếp theo theo trình tự
- Trang có thể yêu cầu ủy quyền
- Chuyển hướng từ HTTP sang HTTPS
- Bạn cần kích hoạt một trang mới trong ứng dụng một trang
Cửa sổ. đối tượng vị trí quản lý địa chỉ được tải bởi trình duyệt. Thao tác với đối tượng vị trí là cách bạn quản lý chuyển hướng trang bằng JavaScript. Đối tượng vị trí có các thuộc tính và phương thức để kích hoạt chuyển hướng trang JavaScript
Các thuộc tính đối tượng vị trí bạn cần làm quen là
- băm. được sử dụng cho các ứng dụng trang đơn và trang web trang đơn
- chủ nhà. tên miền của URL
- tên máy chủ. tương tự như máy chủ
- href. URL đầy đủ
- nguồn gốc. giao thức và tên miền của URL
- tên đường dẫn. sên URL hoặc trang sau nguồn gốc
- Hải cảng. nếu một cổng được bao gồm trong URL
- giao thức. http, https, ftp, ftps, v.v.
Mỗi thuộc tính này là các chuỗi và hỗ trợ tất cả các phương thức chuỗi tiêu chuẩn như thay thế mà chúng ta sẽ sử dụng trong hướng dẫn này
Các phương thức đối tượng vị trí là
- giao phó. đặt đối tượng vị trí thành URL mới
- tải lại. buộc trang tải lại bằng cùng một URL
- thay thế. kích hoạt một chuyển hướng mà chúng ta sẽ khám phá sâu hơn
- Tìm kiếm. cho phép bạn thẩm vấn queryString
Gán và thay thế trông giống nhau, nhưng có các ràng buộc khác nhau. Phương thức gán tải tài nguyên tại URL mới và giữ nguyên mục nhập trước đó trong lịch sử điều hướng của trình duyệt
Điều này có nghĩa là người dùng có thể nhấn nút quay lại và chuyển đến trang gốc
Phương thức thay thế cũng làm điều tương tự, ngoại trừ tài nguyên gốc hoặc 'hiện tại' không được giữ lại trong lịch sử của trình duyệt
Điều này có nghĩa là người dùng không thể nhấn nút quay lại để trở về trang gốc
Cả hai có thể thất bại nếu có hạn chế bảo mật. Ví dụ: tập lệnh của bên thứ ba không thể kích hoạt chuyển hướng. Đây là một điều tốt vì rất nhiều trang web sử dụng tập lệnh của bên thứ ba mà không xác minh mã của họ
Chuyển hướng đến một địa chỉ mới
Khi bạn thay đổi địa chỉ, ví dụ tên miền mới, bạn nên thực hiện chuyển hướng 301. Đây là nơi máy chủ gửi mã trạng thái HTTP là 301, với địa chỉ mới
Mã trạng thái 301 cho tác nhân người dùng biết. tôi. e. trình duyệt hoặc trình thu thập dữ liệu của công cụ tìm kiếm, có một địa chỉ mới. Điều này giống như khi bạn chuyển nhà và gửi thay đổi địa chỉ cho bưu điện. Thư của bạn được chuyển tiếp
Chuyển hướng 301 cho phép bạn giữ lưu lượng truy cập và hy vọng xếp hạng công cụ tìm kiếm của bạn
Thông thường bạn sẽ làm điều này từ máy chủ. Đôi khi điều này là không thể và bạn sẽ cần sử dụng chuyển hướng JavaScript tới một URL
Điều này khá đơn giản, chỉ cần bao gồm một trong các đoạn mã sau
window.location.assign["new target URL"];
//or
window.location.replace["new target URL"];Tôi khuyên bạn nên sử dụng thay thế vì URL ban đầu không hợp lệ. Vì vậy, việc giữ lại nó trong lịch sử phiên của họ có thể khiến họ nhầm lẫn và vẫn kích hoạt chuyển hướng tự động
địa điểm. replace hữu ích cho bất kỳ trường hợp chuyển hướng 301 nào, kể cả khi bạn cần chuyển hướng từ HTTP sang HTTPS. Nhưng một cách ngắn gọn hơn để chuyển hướng từ HTTP sang HTTPS bằng JavaScript là đoạn mã sau
if [location.protocol !== ""]{
location.replace[window.location.href.replace["", ""]];
}Tôi khuyên bạn nên định cấu hình máy chủ của mình để gửi các tiêu đề chuyển hướng HTTP thích hợp vì chúng hiệu quả hơn nhiều. Điều này áp dụng cho cả địa chỉ mới và HTTP sang HTTPS
Sử dụng JavaScript để làm mới trang
Đôi khi bạn sẽ muốn làm mới hoặc tải lại một trang theo chương trình bằng JavaScript. Thông thường, bạn sẽ đặt một nút hoặc thành phần hành động trên trang để người dùng bắt đầu làm mới. Tự động thực hiện làm mới trang có thể là một trải nghiệm khó hiểu và chói tai đối với người dùng của bạn, vì vậy hãy giảm thiểu chiến thuật đó
Địa điểm. phương thức tải lại tải lại tài liệu hiện tại, giống như người dùng nhấn F5 hoặc nút tải lại trình duyệt
Cài đặt mặc định tải lại trang từ bộ đệm của trình duyệt, nếu có. Bạn có thể buộc phương thức bỏ qua bộ đệm cục bộ và truy xuất tài liệu từ mạng bằng cách chuyển true cho phương thức
location.reload[];
//refreshes from cache
//or
location.reload[true];
//to force a network request
Tôi nghĩ cách tốt nhất là sử dụng JavaScript để làm mới trang để phản hồi hành động của người dùng. Điều này thường phản hồi lại trình xử lý sự kiện nhấp hoặc chạm. Tôi cũng nghĩ rằng trong tình huống này, bạn cũng đang có ý định truy xuất từ mạng, vì vậy bạn cũng sẽ muốn thực hiện hành động này
Đây là một ví dụ quá đơn giản
var btn = document.querySelector[".btn-reload"];
btn.addEventListener["click", function[e]{
e.preventDefault[];
location.reload[true];
}]; Bạn nên lưu ý, nếu người dùng đã cuộn trang, trình duyệt có thể không giữ nguyên vị trí cuộn hiện tại của họ. Hầu hết các trình duyệt hiện đại dường như xử lý tốt điều này, nhưng điều này không phải lúc nào cũng đúng
Bạn đang làm mới một trang và nội dung cũng như cấu trúc tài liệu rất có thể đã thay đổi so với những gì được hiển thị ban đầu. Trong những trường hợp này, trình duyệt có thể không xác định được vị trí đặt vị trí cuộn một cách đáng tin cậy. Trong những trường hợp này, trình duyệt không cuộn trang và vị trí ở trên cùng
Ngoài ra còn có kiểm tra bảo mật tại chỗ với lệnh gọi này để ngăn các tập lệnh bên ngoài sử dụng phương thức này một cách độc hại. Điều này liên quan đến Chính sách cùng nguồn gốc. Nếu điều này xảy ra, DOMException sẽ bị ném cùng với SECURITY_ERROR
Chuyển hướng khi gửi biểu mẫu
Một lần khác khi sử dụng vị trí. phương pháp thay thế hữu ích là gửi biểu mẫu
Đây không phải là lựa chọn đúng 100% mọi lúc, nhưng nên cân nhắc. Một ví dụ điển hình là kiểm tra giỏ hàng
Sau khi người dùng nhấp vào nút để gửi thanh toán, họ thường không nên quay lại giỏ hàng. Điều này có thể gây ra tất cả các loại nhầm lẫn và các đơn đặt hàng trùng lặp tiềm năng
Để phản hồi giỏ hàng hoặc bất kỳ biểu mẫu nào được gửi, bạn cần thêm trình xử lý sự kiện nhấp hoặc con trỏ để chặn hành động. Trong phương thức xử lý, bạn nên bao gồm trả về false để ngăn biểu mẫu được gửi tới máy chủ
submitBtn.addEventListener["click", function [evt] {
evt.preventDefault[];
window.location.replace["new target URL"];
return false;
}];
Bạn sẽ làm điều này bình thường khi tạo trình xử lý biểu mẫu phía máy khách, vì vậy đừng quên điều này khi bạn thêm mã JavaScript để chuyển hướng đến một trang mới khác
Chỉ cần một lưu ý hữu ích cho quá trình này. Bạn có thể muốn bao gồm tham số queryString trong URL của mình để chuyển tham chiếu đến trạng thái của người dùng. Điều này có thể giúp bạn hiển thị hoặc cấp nước cho URL mục tiêu mới
Chuyển hướng JavaScript trong Ứng dụng một trang [SPA]
Nguyên tắc cốt lõi của Ứng dụng web một trang [SPA] là những thứ từng tồn tại trên máy chủ hiện đang tồn tại trong trình duyệt. Một trong những trách nhiệm đó là quản lý chuyển hướng. Ví dụ: khi bạn thực hiện cuộc gọi AJAX tới một dịch vụ bảo mật và không có mã thông báo ủy quyền hợp lệ. Dịch vụ sẽ trả về mã trạng thái 401. Khi nhận được mã trạng thái 401, ứng dụng sẽ chuyển hướng người dùng đến địa chỉ đăng nhập
Trong phát triển web cổ điển, yêu cầu AJAX sẽ là yêu cầu trang hoặc đăng lại. Máy chủ nhận ra trạng thái trái phép và thực hiện chuyển hướng thích hợp phía máy chủ. trong ASP. NET, chúng tôi làm điều này với phản hồi. chức năng chuyển hướng
Trong SPA, mã của ứng dụng khách cần quản lý chuyển hướng. Tôi đã gặp phải hai tình huống phổ biến; . Việc chuyển hướng nội bộ khá dễ dàng, hãy thay đổi tuyến đường của đoạn mã băm thành chế độ xem đăng nhập
window.location.hash = "#!login";Nếu bạn đã quen với các ứng dụng trang đơn, bạn sẽ nhận ra đây là cách sử dụng JavaScript để chuyển hướng đến một trang khác
Hãy nhớ rằng khi chuyển hướng đến một trang mới do mã thông báo xác thực cũ hoặc bị thiếu, rất có thể bạn đang sử dụng xác thực đang hoạt động và cần duy trì mã thông báo xác thực ở đâu đó, chẳng hạn như IndexedDB
Nếu bạn đang sử dụng xác thực thụ động, trang sẽ đăng lại máy chủ xác thực và mã thông báo được trả về, thường là trong tiêu đề
Chuyển hướng đến STS thường liên quan đến việc thay đổi địa chỉ của trình duyệt từ URL SPA thành URL xác thực. URL STS rất có thể nằm trên một miền, máy chủ hoàn toàn khác, v.v.
Bất kể trường hợp nào có thể là vị trí phải thay đổi. Hầu hết các nhà phát triển, bao gồm cả tôi, phản ứng đầu tiên là tìm kiếm một vị trí. phương pháp chuyển hướng
Nó không tồn tại
Để thay đổi địa chỉ của trình duyệt, bạn nên sử dụng vị trí. thuộc tính href. Việc thay đổi giá trị này sẽ kích hoạt trình duyệt tải URL mới
window.location.href = myLoginUrl;Bây giờ trình duyệt tải mục tiêu mới. Trong trường hợp này, người dùng sau đó đăng nhập bằng STS và quay lại ứng dụng đã được xác thực
Xác thực là một kịch bản mà bạn có thể thấy mình cần chuyển hướng người dùng theo chương trình. Tất nhiên, có nhiều tình huống khác mà bạn có thể cần chuyển hướng người dùng bên trong hoặc bên ngoài trong quá trình sử dụng ứng dụng thông thường
Bản tóm tắt
Có nhiều lý do khác nhau khiến bạn có thể cần chuyển hướng từ trang này sang trang khác. Cố gắng cấu hình những thứ này trên máy chủ càng nhiều càng tốt. Nhưng có nhiều trường hợp phổ biến mà bạn cần sử dụng JavaScript để thực hiện chuyển hướng trang
Cửa sổ. đối tượng vị trí có các thuộc tính và phương thức mà bạn có thể thao tác bằng JavaScript để chuyển hướng đến các URL khác nhau. Địa điểm. thay thế và vị trí. chỉ định có thể rất hữu ích. Phương thức thay thế giữ cho lịch sử phiên sạch sẽ và phương thức gán cho phép người dùng theo dõi lại lịch sử URL